/* Компактные напоминания, статусы, таймер для всех, помодоро. Подключается после app2.css */

/* ---------- карточка пациента: напоминания, иконка «обновить», корзина ---------- */
.p-head .p-names { flex: 0 1 auto; }
.refresh-btn { align-self: center; color: var(--text-3); margin-left: -4px; }
.refresh-btn:hover { color: var(--brand-ink); background: var(--brand-tint); }
.refresh-btn.spinning .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn.danger-hover:hover { color: var(--danger); background: var(--danger-tint); }
.section-head .add-btn { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); }
.section-head .add-btn:hover { background: var(--brand); color: #fff; }
.rem-empty { color: var(--text-3); font-size: 13px; margin: 0; padding: 4px 0 8px; }
.rem { align-items: center; }
.rem .txt { display: flex; flex-direction: column; gap: 2px; }
.rem-text { border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; margin-left: -7px; background: none; outline: 0; width: 100%; font-weight: 500; }
.rem-text:hover { border-color: var(--border-strong); }
.rem-text:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.rem-text::placeholder { color: var(--text-3); font-weight: 400; }
.rem.done .rem-text { text-decoration: line-through; color: var(--text-3); }
.due-btn { border: 0; background: none; padding: 0; text-align: left; border-radius: 6px; }
.due-btn:hover .due { text-decoration: underline; }

/* ---------- подсказки «@»: коллеги и пациенты ---------- */
.suggest { width: 290px; max-height: 340px; overflow-y: auto; }
.suggest-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); padding: 8px 8px 4px; }
.suggest b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention.patient { border: 0; font: inherit; font-weight: 500; color: #0A6F7C; background: #E2F4F6; border-radius: 4px; padding: 0 3px; cursor: pointer; }
.mention.patient:hover { background: #C9EBEF; }

/* ---------- статусы у аватаров ---------- */
.av-wrap { position: relative; display: inline-flex; flex: none; }
.st-dot { position: absolute; right: -4px; bottom: -3px; min-width: 15px; height: 15px; display: grid; place-items: center; font-size: 10px; line-height: 1; background: var(--surface); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--surface); }
.sidebar .st-dot { background: var(--sidebar); box-shadow: 0 0 0 1.5px var(--sidebar); }
.msg-gutter .st-dot { font-size: 12px; min-width: 18px; height: 18px; }
.msg-status { font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 999px; padding: 0 7px; }

/* ---------- карточка «я» внизу сайдбара: профиль и быстрый статус ---------- */
.me-card { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; background: var(--sidebar-2); width: 100%; }
.me-card:hover { background: var(--sidebar-2); }
.me-card.active { outline: 2px solid rgba(58,170,140,.5); }
.me-main { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px; border: 0; border-radius: 8px; background: none; color: #fff; text-align: left; }
.me-main:hover { background: rgba(255,255,255,.06); }
.me-main > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.me-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-status { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--sidebar-text); font-size: 12px; text-align: left; }
.me-status:hover { background: rgba(255,255,255,.12); color: #fff; }
.me-status .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pomo-mini { font-variant-numeric: tabular-nums; color: #FFB4A8; font-weight: 600; flex: none; }
.pomo-mini:empty { display: none; }
@media (max-width: 980px) and (min-width: 761px) {
  .me-main > span:last-child, .me-status { display: none; }
  .me-card { padding: 4px; align-items: center; }
}

/* ---------- чат: команда и таймер для всех ---------- */
.ch-team-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); padding: 18px 8px 6px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.team-row b { display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row small { display: block; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-timer-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #B4540A; background: #FFEFD9; border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.ch-timer-slot { padding: 10px 14px 0; }
.ch-timer-slot:empty { display: none; }
.ch-timer {
  display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto;
  padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, #FFF4E0, #FFE7CC);
  border: 1px solid #F6D3A3; box-shadow: var(--shadow-sm); animation: rise .25s;
}
.ch-timer .tm-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: #C2650E; flex: none; }
.ch-timer b { display: block; font-size: 15px; }
.ch-timer small { display: block; color: #8A5A24; font-size: 12px; }
.ch-timer .bar { height: 4px; border-radius: 2px; background: rgba(194,101,14,.15); margin-top: 6px; overflow: hidden; }
.ch-timer .bar i { display: block; height: 100%; background: #E07B16; border-radius: 2px; transition: width 1s linear; }
.ch-timer .tm-left { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: #A4500B; letter-spacing: -.5px; }
.ch-timer.done { background: linear-gradient(135deg, #FFE1DD, #FFD2CC); border-color: #F3B1A8; animation: shake .6s 2; }
.ch-timer.done .tm-ico, .ch-timer.done .tm-left { color: var(--danger); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.comp-timer { color: #C2650E; }
.comp-timer:hover { background: #FFEFD9; color: #A4500B; }
.timer-dialog .presets { flex-wrap: wrap; }
.timer-dialog .modal-head h2 { display: flex; align-items: center; gap: 8px; }

/* ---------- главная: помодоро и статус ---------- */
.focus-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.pomo-done { margin-left: auto; font-size: 14px; letter-spacing: 1px; }
.pomo-idle { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 2px; text-align: center; }
.pomo-idle .presets { justify-content: center; margin: 0; }
.pomo-idle p { margin: 0; font-size: 12px; max-width: 340px; }
.pomo-big { font-size: 44px; font-weight: 700; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; }
.pomo-run { display: flex; align-items: center; gap: 22px; padding: 4px 0; }
.ring { position: relative; width: 132px; height: 132px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: var(--surface-2); }
.ring .prog { stroke: #E5533D; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.pomo-run.rest .prog { stroke: var(--brand); }
.pomo-run.paused .prog { stroke: var(--text-3); }
.ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pomo-time { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.pomo-phase { font-size: 12px; color: var(--text-3); }
.pomo-btns { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pomo-btns .btn { justify-content: flex-start; height: 38px; }
.status-now { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; }
.st-big { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--surface-2); border-radius: 14px; flex: none; }
.status-now b { display: block; font-size: 15px; }
.status-now small { display: block; color: var(--text-3); font-size: 12px; }
.status-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.status-chips .chip { height: 30px; font-size: 13px; }
.team-now { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 6px; }
.team-now-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); padding: 6px 0 2px; }
.team-now .team-row { padding: 5px 0; }

@media (max-width: 760px) {
  .focus-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .pomo-run { gap: 16px; }
  .ring { width: 112px; height: 112px; }
  .pomo-time { font-size: 24px; }
  .status-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
  .status-chips .chip { flex: none; height: 36px; }
  .ch-timer .tm-left { font-size: 22px; }
  .rem-text { font-size: 16px !important; }
}

/* ======================================================================
   Главная v2: часы, фон, сбалансированные плитки, список напоминаний
   ====================================================================== */
/* Фон программы — выбирается в профиле (body[data-theme]); лежит под всеми разделами */
body { --g1: rgba(169, 207, 56, .24); --g2: rgba(0, 150, 168, .18); --g3: rgba(76, 179, 134, .12); --page: #F3F7F5; }
body[data-theme="sky"] { --g1: rgba(91, 141, 239, .22); --g2: rgba(0, 150, 168, .16); --g3: rgba(140, 190, 255, .16); --page: #F3F6FB; }
body[data-theme="lavender"] { --g1: rgba(123, 104, 238, .20); --g2: rgba(225, 111, 138, .14); --g3: rgba(180, 160, 255, .14); --page: #F6F4FB; }
body[data-theme="peach"] { --g1: rgba(240, 160, 75, .22); --g2: rgba(225, 111, 138, .14); --g3: rgba(255, 210, 150, .18); --page: #FBF6F2; }
body[data-theme="sand"] { --g1: rgba(194, 124, 90, .14); --g2: rgba(139, 170, 46, .12); --g3: rgba(230, 210, 170, .20); --page: #F8F6F1; }
body[data-theme="none"] { --g1: transparent; --g2: transparent; --g3: transparent; --page: #F7F8F8; }
.main {
  background:
    radial-gradient(640px 320px at 8% -4%, var(--g1), transparent 70%),
    radial-gradient(720px 360px at 96% 6%, var(--g2), transparent 70%),
    radial-gradient(640px 320px at 50% 105%, var(--g3), transparent 70%),
    var(--page);
}
.dash-scroll, .dash-bg { background: none; }
.dash-bg { display: none; }
.dash { position: relative; }
/* на фоне — белые полупрозрачные карточки */
body[data-view="patients"] .list { background: rgba(255, 255, 255, .9); border-radius: 16px; margin: 0 24px 80px; padding: 0 12px 6px; box-shadow: 0 1px 2px rgba(30, 31, 33, .04), 0 6px 20px rgba(30, 31, 33, .05); }
body[data-view="patients"] .list-head { background: transparent; border-radius: 16px 16px 0 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-view="patients"] .empty-state, body[data-view="inbox"] .empty-state { background: rgba(255, 255, 255, .7); border-radius: 18px; margin: 0 24px; }
body[data-view="inbox"] .in-card { box-shadow: 0 1px 2px rgba(30, 31, 33, .04); border-color: rgba(0, 0, 0, .03); }
body[data-view="inbox"] .in-item { margin-bottom: 6px; }
body[data-view="profile"] .card { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(30, 31, 33, .04), 0 6px 20px rgba(30, 31, 33, .04); }
.tabs { border-bottom-color: rgba(0, 0, 0, .06); }
/* чат: фон за сообщениями, панели полупрозрачные */
.chat { background: transparent; }
.ch-list { background: rgba(255, 255, 255, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ch-head, .composer { background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ch-thread { background: rgba(255, 255, 255, .7); }
.msg:hover { background: rgba(255, 255, 255, .6); }
.msg-text { text-shadow: 0 0 0 transparent; }
.day-sep span, .th-divider span { background: rgba(255, 255, 255, .8); border-radius: 999px; padding: 1px 10px; }
.day-sep::before, .day-sep::after, .th-divider::after { border-top-color: rgba(0, 0, 0, .06); }

/* выбор фона в профиле */
.theme-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.theme-label { font-size: 13px; color: var(--text-2); margin-right: 4px; }
.theme-sw { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 5px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; }
.theme-sw:hover { border-color: var(--border-strong); }
.theme-sw.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); font-weight: 600; }
.sw { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .06); }
.sw.t-mint { background: linear-gradient(135deg, #DDF0B8, #BFE6DD, #B5E2E8); }
.sw.t-sky { background: linear-gradient(135deg, #CFDDFB, #BEE3EA, #DCE8FF); }
.sw.t-lavender { background: linear-gradient(135deg, #DCD6FB, #F4D3DC, #E6DFFF); }
.sw.t-peach { background: linear-gradient(135deg, #FBE0BF, #F6D2DA, #FFEBD0); }
.sw.t-sand { background: linear-gradient(135deg, #EEDFD2, #E1E8C9, #F3E9D6); }
.sw.t-none { background: #F7F8F8; }
.dash .dcard { background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(30, 31, 33, .04), 0 6px 20px rgba(30, 31, 33, .04); }
.dash-date { display: inline-flex; align-items: center; gap: 10px; }
.dash-clock {
  font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand-ink);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--brand-tint-2); border-radius: 999px; padding: 1px 10px;
}

.tiles { grid-template-columns: repeat(4, 1fr); }
.tile {
  flex-direction: row; align-items: center; gap: 14px; min-height: 0; padding: 16px 18px;
  border-radius: 18px; border: 1px solid transparent; overflow: hidden; position: relative;
}
.tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none; }
.tile > * { position: relative; z-index: 1; }
.tile-ico { width: 46px; height: 46px; border-radius: 14px; margin: 0; flex: none; background: rgba(255, 255, 255, .75); }
.tile-body { display: flex; flex-direction: column; min-width: 0; }
.tile-num { font-size: 26px; line-height: 1.1; }
.tile-label { color: var(--text); font-weight: 500; }
.tile-sub { color: var(--text-2); }
.tile.t-green { background: linear-gradient(135deg, #E9F7EF, #D7F0E4); }
.tile.t-green .tile-ico { color: #1F7A62; }
.tile.t-amber { background: linear-gradient(135deg, #FFF6E5, #FFEBC7); }
.tile.t-amber .tile-ico { color: #B4540A; }
.tile.t-violet { background: linear-gradient(135deg, #F1EEFF, #E4DEFF); }
.tile.t-violet .tile-ico { color: #5B47D6; }
.tile.t-teal { background: linear-gradient(135deg, #E5F6F8, #D1EEF2); }
.tile.t-teal .tile-ico { color: #0A6F7C; }
.tile.alarm { background: linear-gradient(135deg, #FFECE9, #FFD9D3); }
.tile.alarm .tile-ico { color: var(--danger); }
.tile.alarm .tile-sub { color: var(--danger); font-weight: 600; }
.tile[data-action]:hover { border-color: rgba(0, 0, 0, .06); }

/* «Мои напоминания» на главной */
.rems-card .seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.seg button span { color: var(--text-3); font-size: 12px; margin-left: 2px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.rems-list { margin: 0 -6px; padding: 0 6px; }
.rems-list.expanded { max-height: 460px; overflow-y: auto; }  /* раскрытый список не растягивает страницу */
.more-btn { display: block; width: 100%; margin-top: 8px; padding: 8px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--brand-ink); font-weight: 500; font-size: 13px; }
.more-btn:hover { background: var(--brand-tint); }
body[data-view="patients"] .mlist { background: rgba(255, 255, 255, .9); border-radius: 18px; margin: 0 12px 90px; padding: 4px 6px; }
.rem-group { font-size: 12px; font-weight: 600; color: var(--text-2); padding: 12px 2px 4px; text-transform: lowercase; }
.rem-group::first-letter { text-transform: uppercase; }
.rem-group.late { color: var(--danger); }
.dcard.flash { animation: cardflash 1.6s ease; }
@keyframes cardflash { 0%, 40% { box-shadow: 0 0 0 3px var(--brand), var(--shadow); } }

/* помодоро: всё по центру карточки, кнопки в ряд */
.pomo-card { display: flex; flex-direction: column; }
.pomo-idle, .pomo-run { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.pomo-run { padding: 6px 0 4px; }
.pomo-info { font-size: 13px; color: var(--text-2); }
.pomo-btns { flex-direction: row; justify-content: center; flex: none; flex-wrap: wrap; }
.pomo-btns .btn { height: 38px; padding: 0 16px; justify-content: center; }
.ring { width: 148px; height: 148px; }
.pomo-time { font-size: 32px; }

/* кнопка отправки комментария на телефоне — круглая, только иконка */
@media (max-width: 760px) {
  .comment-box .send-comment { width: 40px; height: 40px; padding: 0; border-radius: 50%; flex: none; }
  .comment-box .send-comment .icon { width: 18px; height: 18px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { padding: 12px; gap: 10px; flex-direction: column; align-items: flex-start; }
  .tile-ico { width: 38px; height: 38px; border-radius: 12px; }
  .tile-num { font-size: 24px; }
  .dash-date { flex-wrap: wrap; }
  .ring { width: 128px; height: 128px; }
  .rems-list.expanded { max-height: none; }
  .rems-card .dcard-head { flex-wrap: wrap; }
}

/* ---------- профиль: карточка Telegram (основной, API, вторичные) ---------- */
.tg-card h3 { display: flex; align-items: center; gap: 8px; }
.tg-card h3 .icon { color: #229ED9; }
.tg-step { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.tg-step-num { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; font-size: 13px; }
.tg-step b { font-weight: 600; margin-right: 6px; }
.tg-step .muted { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.tg-step .set-row:first-of-type { border-top: 0; }
.tg-main { max-width: 340px; margin-top: 8px; }
.tg-team { padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.tg-team .muted { color: var(--text-2); font-size: 13px; margin-bottom: 4px; }

/* инструкция «Как включить уведомления» */
.guide .modal-head { display: flex; align-items: center; justify-content: space-between; }
.guide-why b { color: var(--text); font-weight: 600; }
.guide-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.guide-why { margin: 0 0 4px; font-size: 13px; }
.guide .tg-step .muted b { color: var(--text); font-weight: 600; }
.guide .tg-step .muted .icon { vertical-align: -3px; color: var(--brand-ink); }
.guide-act { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.guide-tip { display: flex; gap: 10px; padding: 10px 12px; margin-top: 10px; border-radius: 10px; background: var(--warn-tint); font-size: 13px; }
.guide-tip > .icon { flex: none; color: var(--warn); margin-top: 1px; }
.guide-tip .muted { color: var(--text-2); margin-top: 2px; }
.notice > span { flex: 1; }
.notice .icon-btn.sm { margin-left: 0; flex: none; width: 28px; height: 28px; }
@media (max-width: 760px) {
  .overlay.small .modal.dialog.guide { max-height: 92dvh; }
  .guide .modal-head { padding: 14px 16px 6px; }
  .guide-tabs .chip { flex: 1; justify-content: center; }
  .notice { flex-wrap: wrap; align-items: flex-start; }
  .notice > span { flex: 1 1 200px; }
  .notice .btn:not(.icon-btn) { order: 3; margin-left: 30px; }
}

/* карточка пациента: вкладки «Карточка» / «Переписка» */
.pane-tabs { display: flex; gap: 4px; margin: 4px 0 14px; border-bottom: 1px solid var(--border); }
.pane-tab { border: 0; background: none; padding: 8px 12px; font: inherit; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.pane-tab:hover { color: var(--text); }
.pane-tab.on { color: var(--brand-ink); border-bottom-color: var(--brand); }

/* переписка в Telegram: шапка карточки сверху, сообщения прокручиваются, поле ввода прижато к низу */
#pane.tg-mode .pane-body { display: flex; flex-direction: column; overflow: hidden; }
#pane.tg-mode .pane-inner { flex: none; padding-bottom: 0; }
#pane.tg-mode .pane-tabs { margin-bottom: 0; }
.tgc { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface-2); }
.tgc-contacts { display: flex; gap: 6px; padding: 8px 16px; flex-wrap: wrap; }
.tgc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.tgc-who { align-self: center; font-size: 12px; color: var(--text-3); display: flex; gap: 6px; align-items: center; margin: 4px 0 8px; }
.tgc-day { align-self: center; font-size: 12px; color: var(--text-2); background: var(--surface); border-radius: 999px; padding: 2px 10px; margin: 8px 0 4px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.tgc-empty { margin: auto; text-align: center; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; max-width: 360px; }
.tgc-empty .skeleton { width: 240px; }
.tgc-msg { display: flex; gap: 4px; align-items: center; max-width: 82%; }
.tgc-msg.in { align-self: flex-start; }
.tgc-msg.out { align-self: flex-end; flex-direction: row-reverse; }
.tgc-msg.pending { opacity: .6; }
.tgc-bubble { background: var(--surface); border-radius: 14px 14px 14px 4px; padding: 7px 10px 5px; box-shadow: 0 1px 2px rgba(0,0,0,.06); min-width: 0; }
.tgc-msg.out .tgc-bubble { background: var(--brand-tint); border-radius: 14px 14px 4px 14px; }
.tgc-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.tgc-tr { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border-strong); color: var(--text-2); white-space: pre-wrap; font-size: 13px; }
.tgc-meta { font-size: 11px; color: var(--text-3); text-align: right; margin-top: 2px; display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.tgc-ticks.read { color: var(--brand); }
.tgc-quote { border-left: 3px solid var(--brand); padding: 2px 8px; margin-bottom: 4px; font-size: 12px; color: var(--text-2); background: rgba(0,0,0,.03); border-radius: 4px; }
.tgc-photo { display: block; max-width: 260px; max-height: 300px; border-radius: 10px; margin-bottom: 4px; }
.tgc-bubble audio, .tgc-bubble video { display: block; max-width: 260px; margin-bottom: 4px; }
.tgc-file { display: flex; gap: 8px; align-items: center; color: var(--brand-ink); text-decoration: none; padding: 4px 0; }
.tgc-acts { display: flex; opacity: 0; transition: opacity .15s; }
.tgc-msg:hover .tgc-acts { opacity: 1; }
.tgc-acts .icon-btn { width: 28px; height: 28px; }
.tgc-bar { padding: 6px 16px 0; background: var(--surface); border-top: 1px solid var(--border); }
.tgc-bar-item { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.tgc-bar-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* прикреплённый файл — нажать и посмотреть тут же */
.tgc-bar-file { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tgc-bar-file:hover { background: rgba(0, 0, 0, .05); color: var(--text); }
body[data-theme="night"] .tgc-bar-file:hover { background: rgba(255, 255, 255, .08); }
.att-chip[data-action="att-view"], .chip[data-sv="file-view"] { cursor: pointer; }
.tgc-comp { background: var(--surface); border-top: 1px solid var(--border); padding: 6px 12px 10px; }
.tgc-bar:not([hidden]) + .tgc-comp { border-top: 0; }
.tgc-ai { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.tgc-ai .btn.busy { opacity: .6; pointer-events: none; }
.tgc-ai .btn.busy .icon { animation: spin 1s linear infinite; }
.tgc-split { display: inline-flex; }
.tgc-split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 6px; }
.tgc-lang-btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding: 0 6px !important; }
.tgc-row { display: flex; gap: 6px; align-items: flex-end; }
.tgc-row textarea { flex: 1; resize: none; border: 1px solid var(--border-strong); border-radius: 18px; padding: 8px 14px; font: inherit; line-height: 1.4; max-height: 160px; outline: 0; background: var(--surface); }
.tgc-row textarea:focus { border-color: var(--brand); }
.tgc-send { background: var(--brand); color: #fff; border-radius: 50%; width: 38px; height: 38px; flex: none; }
.tgc-send:hover { background: var(--brand-ink); color: #fff; }
.small-note { font-size: 12px; margin-top: 6px; }
@media (max-width: 760px) {
  .tgc-msg { max-width: 92%; }
  .tgc-acts { opacity: 1; }
  .tgc-acts .icon-btn { width: 30px; height: 30px; }
  .tgc-list { padding: 8px 10px 12px; }
  .tgc-comp { padding: 6px 8px calc(8px + var(--sab)); }
  .tgc-photo, .tgc-bubble audio, .tgc-bubble video { max-width: 220px; }
}
.tg-emoji { position: fixed; z-index: 90; display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); animation: fade .1s; }
.tg-emoji button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 21px; cursor: pointer; }
.tg-emoji button:hover { background: var(--surface-2); }
.tgc-row .rec-bar { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 38px; }
.tgc-row .rec-bar .grow { color: var(--text-2); font-size: 13px; }
.tgc-who { flex-wrap: wrap; justify-content: center; }
.tgc-auto { display: inline-flex; gap: 5px; align-items: center; margin-left: 8px; color: var(--text-2); cursor: pointer; }
.tgc-auto input { margin: 0; accent-color: var(--brand); }
.tgc-tr-line { display: flex; gap: 4px; align-items: center; border: 0; background: none; padding: 0; margin-top: 4px; font: inherit; font-size: 11px; color: var(--brand-ink); cursor: pointer; }
button.tgc-tr-line:hover { text-decoration: underline; }
.pane-title.mob { display: flex; align-items: center; gap: 8px; }
.pane-title.mob > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* телефон, вкладка «Переписка»: имя и фото уже в шапке — освобождаем место под сообщения */
@media (max-width: 760px) {
  #pane.tg-mode .pane-inner > .p-head, #pane.tg-mode .pane-inner > .banner, #pane.tg-mode .pane-inner > .pending { display: none; }
  #pane.tg-mode .pane-tabs { margin-top: 0; }
  .tgc-auto { margin-left: 0; }
}

/* поле ввода в обоих чатах: текст слева, эмодзи и скрепка справа внутри рамки; кнопка отправки — рядом */
.comp-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; border: 1px solid var(--border-strong); border-radius: 21px; background: var(--surface); padding: 0 3px 0 0; transition: border-color .15s, box-shadow .15s; }
.comp-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* одна строка текста — ровно по центру поля высотой 40px: 10 + 20 + 10 */
.comp-field textarea { flex: 1; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; resize: none; background: none !important;
  padding: 10px 4px 10px 15px !important; line-height: 20px !important; min-height: 40px !important; max-height: 160px; border-radius: 0 !important; font: inherit; }
.comp-field .in-field { width: 32px; height: 32px; margin: 4px 0; flex: none; color: var(--text-3); }
.comp-field .in-field:hover { color: var(--brand-ink); background: var(--surface-2); }
.comp-field .in-field .icon { width: 20px; height: 20px; }
.comp-field .in-field.busy { pointer-events: none; color: var(--brand); }
.comp-field .in-field.busy .icon { animation: spin 1s linear infinite; }
.mob-only { display: none !important; }
.tgc-row, .comp-row { align-items: flex-end; }
.tgc-row .tgc-send, .comp-row .send-btn { width: 40px; height: 40px; }
/* чат коллег: рамка теперь у поля, а не у всей строки */
.comp-row { border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 6px !important; background: none !important; }
.emoji-grid { position: fixed; z-index: 90; display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--shadow); animation: fade .1s; }
.emoji-grid button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 21px; cursor: pointer; }
.emoji-grid button:hover { background: var(--surface-2); }
/* «Переведено с узбекского» — заметно, но спокойно */
/* язык для пациента: русский, узбекский латиницей и кириллицей */
.lang-seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 2px; gap: 2px; flex: none; }
.lang-seg button { border: 0; background: none; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.lang-seg button.on { background: var(--brand); color: #fff; font-weight: 600; }
.suggest-lang { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 2px; font-size: 12px; color: var(--text-3); }
.pr-lang-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pr-lang-row label { margin: 0; }
.memo-langs { display: inline-flex; gap: 4px; flex: none; }
/* язык памятки: проверен — обычный, черновик ИИ — оранжевый, устарел или нет — бледный */
.me-lang[data-st="draft"], .me-tabs [data-st="draft"] .me-dot { --st: var(--warn); }
.me-lang[data-st="stale"], .me-lang[data-st="none"], .me-tabs [data-st="stale"] .me-dot, .me-tabs [data-st="none"] .me-dot { --st: var(--danger); }
.memo-langs .me-lang { --st: var(--brand); display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 12px;
  font-weight: 500; color: var(--text-2); cursor: pointer; }
.memo-langs .me-lang::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st); }
.memo-langs .me-lang:hover { border-color: var(--border-strong); color: var(--text); }
.me-lang[data-st="draft"] { border-color: var(--warn); color: var(--warn); }
.me-lang[data-st="stale"], .me-lang[data-st="none"] { opacity: .75; border-style: dashed; }
/* редактор памятки */
.memo-editor { width: min(860px, 100%); }
.memo-editor .modal-head { gap: 12px; }
.me-tabs { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; margin-right: auto; }
.me-tabs button { position: relative; border: 0; background: none; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.me-tabs button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.me-dot { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--st, transparent); }
.me-tabs [data-st="ok"] .me-dot { --st: var(--brand); }
.me-tabs [data-st="busy"] .me-dot { --st: var(--warn); animation: me-pulse 1s infinite alternate; }
@keyframes me-pulse { to { opacity: .25; } }
.me-text { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }
.me-help { font-size: 11.5px; margin: 6px 0 0; }
.me-row { display: flex; gap: 10px; align-items: flex-end; }
.me-row > .f { margin-bottom: 0; }
.me-row select { max-width: 260px; }
.me-st { align-items: center; }
.me-st-draft, .me-st-busy { background: var(--warn-tint); }
.me-st-stale, .me-st-none { background: var(--danger-tint); }
.me-st-ok { background: var(--brand-tint); }
@media (max-width: 760px) {
  .me-row { flex-direction: column; align-items: stretch; }
  .me-row select { max-width: none; }
  .memo-editor .modal-head { gap: 6px; }
  .memo-editor .modal-head h2 { font-size: 16px; }
  .me-tabs button { padding: 5px 9px; }
  .memo-editor .modal-foot { gap: 8px; }
  .memo-editor .modal-foot > .grow { display: none; }
  .memo-editor .modal-foot .btn { flex: 1; justify-content: center; padding-left: 8px; padding-right: 8px; }
  .me-st { flex-wrap: wrap; }
}
/* файл памятки: перетащить в форму или выбрать */
.memo-drop { margin: 0; min-height: 40px; padding: 9px 12px; }
.memo-drop span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo-drop.over { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-tint); border-style: solid; }
.memo-drop.has { border-style: solid; color: var(--text); }
/* как в Telegram: сплошная полоса над перепиской, во всю ширину, текст по центру */
.tgc-top { display: flex; background: var(--surface); border-bottom: 1px solid var(--border); }
.tr-pill { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 0; background: transparent; color: var(--brand-ink); padding: 9px 12px; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .15s; }
.tr-pill:hover { background: var(--brand-tint); }
#pane.tg-mode .tgc-top:not([hidden]) { overflow: hidden; }  /* подсветка при наведении — в скруглённых углах островка */
#pane.tg-mode .tr-pill { border-radius: inherit; }
.tr-pill-hint { font-weight: 400; color: var(--text-3); }
@media (max-width: 760px) {
  .mob-only { display: grid !important; }
  .tgc-ai { display: none !important; }
  .comp-field textarea { font-size: 16px; }  /* меньше 16px — iPhone увеличивает страницу при вводе */
  .emoji-grid { grid-template-columns: repeat(8, 1fr); left: 8px !important; right: 8px; }
  .emoji-grid button { width: auto; height: 40px; }
}

/* анимированная инструкция: как получить API ID и API hash */
.tgg-open { margin-top: 8px; }
.overlay.small .modal.dialog.tgg { width: min(620px, 100%); }
.tgg .modal-head { display: flex; align-items: center; justify-content: space-between; }
.tgg .modal-foot { justify-content: space-between; }
.tgg-steps { display: flex; align-items: center; margin: 2px 0 14px; }
.tgg-line { flex: 1; height: 2px; background: var(--border); }
.tgg-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.tgg-dot.done { background: var(--brand-tint); border-color: transparent; color: var(--brand-ink); }
.tgg-dot.on { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.1); }
.tgg-title { margin: 14px 0 4px; font-size: 16px; }
.tgg-text { margin: 0; color: var(--text-2); line-height: 1.5; }
.tgg-text b { color: var(--text); }
/* мини-окно браузера с экраном my.telegram.org */
.mt-win { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #F1F3F6; box-shadow: 0 2px 10px rgba(0,0,0,.06); animation: fade .25s; }
.mt-bar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #E6E9EE; }
.mt-dots { display: flex; gap: 5px; } .mt-dots i { width: 9px; height: 9px; border-radius: 50%; background: #C9CED6; }
.mt-url { flex: 1; display: flex; align-items: center; gap: 5px; background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; color: #555; }
.mt-body { position: relative; min-height: 236px; padding: 14px; font-size: 12.5px; color: #1d2329; }
.mt-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.mt-logo { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(#37AEE2, #1E96C8); color: #fff; display: grid; place-items: center; }
.mt-h { font-weight: 700; font-size: 15px; } .mt-h.sm { font-size: 13px; margin-bottom: 6px; } .mt-h.left { text-align: left; margin-bottom: 8px; }
.mt-sub { color: #6b7480; font-size: 11.5px; margin-bottom: 4px; }
.mt-card { background: #fff; border-radius: 10px; padding: 10px; width: min(300px, 100%); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mt-card-sm { width: auto; flex: 1; min-width: 0; }
.mt-input { position: relative; border: 1px solid #d5dbe2; border-radius: 8px; padding: 14px 10px 5px; min-height: 36px; text-align: left; background: #fff; transition: border-color .15s, box-shadow .15s; overflow: hidden; }
.mt-input.focus { border-color: #2A9EF4; box-shadow: 0 0 0 3px rgba(42,158,244,.15); }
.mt-input.mt-empty { color: #9aa3ad; }
.mt-label { position: absolute; top: 3px; left: 10px; font-size: 9.5px; color: #8a94a0; }
.mt-val { font-weight: 600; white-space: nowrap; }
.mt-input.focus .mt-val::after { content: ""; display: inline-block; width: 1px; height: 13px; background: #1d2329; margin-left: 1px; vertical-align: -2px; animation: mt-caret 1s steps(1) infinite; }
@keyframes mt-caret { 50% { opacity: 0; } }
.mt-btn { background: #2A9EF4; color: #fff; border-radius: 999px; padding: 8px; font-weight: 600; text-align: center; transition: transform .1s, filter .15s; }
.mt-btn.left { align-self: flex-start; display: inline-block; padding: 8px 18px; margin-top: 8px; }
.mt-btn.brand { background: var(--brand); }
[data-click].pressed { transform: scale(.95); filter: brightness(.9); }
.mt-two { display: flex; gap: 10px; align-items: center; }
.mt-phone { flex: 1; min-width: 0; background: #DCE8D3; border-radius: 10px; padding: 8px; }
.mt-phone-top { font-weight: 700; font-size: 11px; color: #3d6b35; margin-bottom: 6px; }
.mt-bubble { background: #fff; border-radius: 10px 10px 10px 3px; padding: 7px 9px; line-height: 1.4; font-size: 11.5px; }
.mt-code { display: inline-block; margin-top: 3px; font-weight: 700; color: #7B4BC9; animation: mt-glow 1.6s ease-in-out infinite; border-radius: 4px; padding: 0 3px; }
@keyframes mt-glow { 50% { background: rgba(123,75,201,.14); } }
.mt-list { background: #fff; border-radius: 10px; padding: 4px 12px; }
.mt-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef0f3; }
.mt-row:last-child { border-bottom: 0; }
.mt-link { color: #2A9EF4; font-weight: 600; white-space: nowrap; border-radius: 6px; padding: 0 4px; transition: transform .1s; }
.mt-link.pressed { background: rgba(42,158,244,.12); }
.mt-danger { color: #E5484D; white-space: nowrap; } .mt-muted { color: #8a94a0; white-space: nowrap; }
.mt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.mt-pad > .mt-input { margin-bottom: 8px; }
.mt-plat { display: flex; gap: 6px; }
.mt-plat span { flex: 1; text-align: center; border: 1px solid #d5dbe2; border-radius: 8px; padding: 7px 4px; background: #fff; transition: all .2s; }
.mt-plat span.selected { border-color: #2A9EF4; background: #EAF5FE; color: #1E7FCB; font-weight: 600; }
.mt-kv { display: flex; gap: 6px; align-items: baseline; padding: 4px 0; min-width: 0; }
.mt-kv span { color: #6b7480; flex: none; }
.mt-hl { font-family: ui-monospace, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; background: rgba(255,214,10,.35); border-radius: 4px; padding: 0 3px; animation: mt-glow2 1.6s ease-in-out infinite; }
@keyframes mt-glow2 { 50% { background: rgba(255,214,10,.65); } }
.mt-arrow { color: var(--brand); transform: rotate(-90deg); flex: none; animation: mt-nudge 1s ease-in-out infinite; }
@keyframes mt-nudge { 50% { translate: 4px 0; } }
.mt-ours .mt-input.focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.mt-cursor { position: absolute; left: 50%; top: 110%; width: 22px; height: 22px; color: #1d2329; opacity: 0; pointer-events: none; transition: left .5s cubic-bezier(.3,.7,.3,1), top .5s cubic-bezier(.3,.7,.3,1), opacity .2s; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mt-cursor.show { opacity: 1; }
.mt-cursor .icon { width: 22px; height: 22px; }
@media (max-width: 760px) {
  .mt-body { padding: 10px; min-height: 250px; }
  .mt-two { flex-direction: column; align-items: stretch; }
  .mt-arrow { transform: none; align-self: center; }
  .mt-grid2 { grid-template-columns: 1fr; }
  .mt-row span:first-child { font-size: 11.5px; }
  .tgg-dot { width: 26px; height: 26px; }
}

/* «Ваш облачный пароль» — когда Telegram просит пароль двухэтапной проверки */
.cloud-pass { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--brand-tint); }
.cloud-pass-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand-ink); }
.cloud-pass .muted { font-size: 12.5px; }
.cloud-pass input { width: 100%; }

/* просмотрщик: крестик не уходит под вырез экрана iPhone; PDF — страницы одна под другой */
.lb-bar { padding-top: max(12px, env(safe-area-inset-top)); }
.lb-stage video { max-width: 100%; max-height: 100%; border-radius: 6px; }
.lb-stage.pdf { padding: 0; align-items: stretch; }
.lb-pdf { flex: 1; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 8px calc(16px + var(--sab)); -webkit-overflow-scrolling: touch; }
.lb-pdf canvas { background: #fff; border-radius: 4px; box-shadow: 0 4px 20px rgba(0,0,0,.4); max-width: 100%; }
.lb-pdf-wait { color: rgba(255,255,255,.75); margin: auto; text-align: center; padding: 20px; }
@media (max-width: 760px) {
  .lb-stage { padding: 0 8px 16px; }
  .lb-nav { display: none; }  /* на телефоне листают пальцем */
}
/* фото в карточке: при наведении — корзина */
.thumb { padding: 0; }
.thumb-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.thumb-del { position: absolute; top: 5px; right: 5px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(20,28,29,.65); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s; cursor: pointer; }
.thumb:hover .thumb-del, .thumb-del:focus-visible { opacity: 1; }
.thumb-del:hover { background: var(--danger); }
@media (hover: none) { .thumb-del { opacity: .85; width: 26px; height: 26px; } }
/* файлы: имя-кнопка, аудио-плеер */
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-ink); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.link-btn:hover { text-decoration: underline; }
.file-audio { display: block; width: 100%; max-width: 320px; height: 36px; margin-top: 6px; }
.file-row.has-audio { align-items: flex-start; }
button.m-file { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.tgc-photo-btn { display: block; border: 0; padding: 0; background: none; cursor: zoom-in; }
button.tgc-file { border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.tgc-audio-alt { display: block; font-size: 12px; color: var(--brand-ink); margin-bottom: 4px; }

/* Word: страницы документа на сером фоне; на узком экране — уменьшаем страницу целиком */
.lb-doc { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px 8px calc(16px + var(--sab)); }
.lb-doc .docx-wrapper { background: transparent !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 12px; zoom: var(--doc-zoom, 1); }
.lb-doc .docx-wrapper > section.docx { box-shadow: 0 4px 20px rgba(0,0,0,.4) !important; margin: 0 !important; }
/* Excel: вкладки листов и таблица с сеткой */
.lb-sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; margin: 0 8px calc(12px + var(--sab)); border-radius: 8px; overflow: hidden; }
.lb-sheet-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: #eef1f4; overflow-x: auto; flex: none; }
.lb-sheet-tab { border: 0; background: none; padding: 7px 14px; border-radius: 8px 8px 0 0; font: inherit; font-size: 13px; color: #4a5560; cursor: pointer; white-space: nowrap; }
.lb-sheet-tab.on { background: #fff; color: #1d2329; font-weight: 600; }
.lb-sheet-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.lb-sheet-body table { border-collapse: collapse; font-size: 13px; color: #1d2329; }
.lb-sheet-body td { border: 1px solid #dfe3e8; padding: 4px 8px; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.lb-sheet-body tr:first-child td { background: #f5f7f9; font-weight: 600; position: sticky; top: 0; }
.lb-sheet-note, .lb-sheet .lb-pdf-wait { color: #6b7480; padding: 12px; font-size: 13px; }

/* телефон: прокрутили карточку ниже имени — фото и имя плавно появляются в верхней строке */
@media (max-width: 760px) {
  .pane-title.mob > * { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
  #pane.scrolled .pane-title.mob > *, #pane.tg-mode .pane-title.mob > * { opacity: 1; transform: none; }
}
/* «Приложения»: пока пусто — только область для файлов */
.files-section .dropzone { margin-top: 0; }
/* напоминание, которое уйдёт пациенту */
.rem .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rem-tg { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--border-strong); background: none; border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; }
.rem-tg:hover { border-color: var(--brand); color: var(--brand-ink); }
.rem-tg.on { border-style: solid; border-color: transparent; background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.rem-tg.sent { border: 0; color: var(--brand-ink); cursor: default; }
.rem-tg.failed { border: 0; color: var(--danger); cursor: default; }
.rem.to-tg textarea.rem-text { width: 100%; resize: none; field-sizing: content; min-height: 44px; max-height: 160px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font: inherit; line-height: 1.4; background: var(--surface); }
.rem.to-tg textarea.rem-text:focus { border-color: var(--brand); outline: 0; }
.rem-ai { display: flex; gap: 4px; margin-top: 4px; }
.rem-ai .btn.busy { opacity: .6; pointer-events: none; }
.np-rem-tg { display: flex !important; align-items: center; gap: 6px; flex-direction: row !important; cursor: pointer; font-size: 13px; color: var(--text-2); }
.np-rem-tg input { margin: 0; accent-color: var(--brand); }
/* @ в переписке: файлы из карточки */
.tg-suggest .sg-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: none; }
.tg-suggest .file-ext { flex: none; }
.tg-suggest .sg-name { min-width: 0; } .tg-suggest .sg-name b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* карточка: имя и фото в верхней строке — только когда прокрутили ниже имени (и на компьютере) */
.pane-title.mob > * { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
#pane.scrolled .pane-title.mob > * { opacity: 1; transform: none; }
@media (min-width: 761px) {
  .pane-title.mob { flex: 0 1 auto; min-width: 0; max-width: 0; overflow: hidden; transition: max-width .25s; font-weight: 600; white-space: nowrap; }
  .pane-title.mob > :first-child { flex: none; }  /* узкая карточка: сжимается имя, а не кнопки */
  #pane.scrolled .pane-title.mob { max-width: 280px; margin-right: 6px; }
  #pane.scrolled .pane-bar .btn .lbl { display: none; }  /* прокрутили — кнопки без подписей, место под имя */
}
@media (max-width: 760px) {
  #pane.tg-mode .pane-title.mob > * { opacity: 1; transform: none; }
  #pane.tg-mode .pane-top { display: none; }
}
/* вкладки «Карточка» / «Переписка» прилипают к верху при прокрутке */
.pane-inner.pane-top { padding-bottom: 0; }
.pane-inner.pane-rest { padding-top: 16px; }
.pane-tabs { position: sticky; top: 0; z-index: 6; background: var(--surface); margin: 0; padding: 0 28px; transition: box-shadow .2s; }
#pane.scrolled .pane-tabs { box-shadow: 0 6px 12px -8px rgba(0,0,0,.18); }
#pane.tg-mode .pane-tabs { flex: none; }
@media (max-width: 760px) { .pane-tabs { padding: 0 12px; } }

/* напоминание пациенту: время и отметка сверху, ниже текст и кнопки ИИ */
.rem.to-tg { align-items: flex-start; }
.rem.to-tg > .check { margin-top: 1px; }
.rem.to-tg .txt { gap: 6px; }
.rem.to-tg textarea.rem-text { margin-left: 0; font-weight: 400; }
.rem.to-tg .rem-ai { margin: -2px 0 0 -8px; }

/* новый пациент: блок «Напоминание» */
.np-block { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.np-block-head { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.np-block-head b { color: var(--text); font-weight: 600; }
.np-block-head select { margin-left: auto; height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; background: var(--surface); font: inherit; max-width: 60%; }
#np-rem-extra { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
#np-rem-extra[hidden] { display: none; }
.np-rem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.np-rem-grid .f[hidden] { display: none; }
.np-rem-grid:has(#np-rem-what[hidden]) { grid-template-columns: 1fr; }
.np-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.np-switch > span:last-child { display: inline-flex; align-items: center; gap: 6px; }
#np-rem-msg textarea { height: auto; min-height: 76px; padding: 8px 10px; resize: vertical; line-height: 1.4; }
#np-rem-msg .rem-ai { margin: 4px 0 0 -8px; }
@media (max-width: 760px) {
  .np-rem-grid { grid-template-columns: 1fr; }
  .np-block-head select { height: 40px; }
}

/* выбор коллег для закрытого канала */
.people-seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; gap: 2px; }
.people-seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.people-seg button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.people-list { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; max-height: 240px; overflow-y: auto; }
.people-list[hidden] { display: none; }
.person, .people-me { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.person { cursor: pointer; }
.f label.person { display: flex; margin: 0; font-size: 14px; font-weight: 400; color: var(--text); }
.person:hover { background: var(--surface-2); }
.f .person input { width: 18px; height: 18px; flex: none; accent-color: var(--brand); box-shadow: none; }
.people-me { border-bottom: 0; color: var(--text-3); padding-left: 38px; }

/* выполненные напоминания: остаются в списке, но неактивные — серые и зачёркнутые */
.rem.done { opacity: .62; }
.rem.done:hover { opacity: .9; }
.rem.done .check.on { background: var(--text-3); border-color: var(--text-3); }
.rem.done .meta .due-btn, .rem.done .meta .due { color: var(--text-3); }
.rem-done-head, .rem-group.done-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rem-done-head { margin-top: 10px; padding: 8px 4px 2px; border-top: 1px dashed var(--border); font-size: 12px; font-weight: 600; color: var(--text-3); }
.rem-done-head .link-btn, .done-group .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-3); text-transform: none; }
.rem-done-head .link-btn:hover, .done-group .link-btn:hover { color: var(--danger); }
.rem-group.done-group { color: var(--text-3); }
/* только что выполнили — строка коротко вспыхивает */
.rem.just-done { animation: rem-flash .6s ease; }
@keyframes rem-flash { 30% { background: var(--brand-tint); } }
.check.pop { animation: check-pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes check-pop { 40% { transform: scale(1.45); } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 1000; }

/* безопасность: запертая база, код восстановления, слабый пароль */
.locked-banner { text-align: left; margin: 0 auto 14px; max-width: 520px; }
.locked-banner .link { display: block; margin-top: 6px; }
.recovery p { margin: 0 0 12px; line-height: 1.5; }
.rc-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-align: center;
  padding: 14px 10px; border: 2px dashed var(--brand); border-radius: 12px; background: var(--brand-tint); color: var(--brand-ink); margin-bottom: 12px; overflow-wrap: anywhere; user-select: all; }
.rc-ok { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.rc-ok input { width: 18px; height: 18px; accent-color: var(--brand); }
.pass-warn { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--danger); font-size: 13px; }
.logout-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .rc-code { font-size: 16px; } }

/* iPhone с главного экрана: окно страницы бывает короче экрана — app.js меряет разницу (--fit-gap) */
:root { --sab: max(env(safe-area-inset-bottom), var(--fit-pad, 0px)); }
@media (max-width: 760px) {
  .app, .main { height: calc(100dvh + var(--fit-gap, 0px)); }
  .tabbar { bottom: calc(-1 * var(--fit-gap, 0px)); }
  .fab:not([hidden]) { bottom: calc(var(--tabbar-h) + 16px - var(--fit-gap, 0px)); }
  .toasts { bottom: calc(var(--tabbar-h) + 12px - var(--fit-gap, 0px)); }
  .pane, .overlay, .lightbox, .sheet-wrap, .picker { bottom: calc(-1 * var(--fit-gap, 0px)); }
  .modal { height: calc(100dvh + var(--fit-gap, 0px)); }
}

/* выбор нескольких пациентов */
.sel-box { width: 20px; height: 20px; flex: none; display: inline-grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: transparent; padding: 0; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; }
.sel-box .icon { width: 13px; height: 13px; stroke-width: 3; }
.sel-box.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sel-box.some { background: var(--brand-tint); border-color: var(--brand); }
.list .row .sel-box, .list .list-head .sel-box { margin-right: 10px; opacity: 0; }
.list .row:hover .sel-box, .list.selecting .sel-box, .list .list-head:hover .sel-box, .sel-box.on { opacity: 1; }
.list-head > div:first-child { display: flex; align-items: center; }
.row.picked { background: var(--brand-tint); }
.mlist.selecting .mrow { -webkit-user-select: none; user-select: none; }
.mrow { -webkit-touch-callout: none; }
.mrow .sel-box { width: 24px; height: 24px; border-radius: 50%; }
.mrow.picked { background: var(--brand-tint); }
.btn.on { background: var(--brand-tint); color: var(--brand-ink); }
.selbar { position: fixed; left: calc(50% + 124px); transform: translateX(-50%); bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 6px;
  width: max-content; max-width: calc(100vw - 280px); padding: 8px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(20, 28, 29, .18); animation: rise .18s cubic-bezier(.2,.7,.3,1); }
body:not(.has-selbar) .selbar { display: none; }
.sel-count { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.btn.danger-ghost { color: var(--danger); }
.btn.danger-ghost:hover { background: rgba(229, 72, 77, .08); }
body.has-selbar .fab { display: none !important; }
@media (max-width: 760px) {
  .selbar { left: 8px; right: 8px; transform: none; width: auto; max-width: none; bottom: calc(var(--tabbar-h) + 8px - var(--fit-gap, 0px)); padding: 6px 6px 6px 4px; gap: 4px; }
  .selbar .btn span { display: none; }
  .selbar .btn { padding: 0 10px; height: 36px; }
  .sel-count .link-btn { font-size: 13px; }
}

/* окно рассылки и напоминания для нескольких пациентов */
.modal.bulk { width: min(620px, 100%); }
.modal.bulk .modal-body { display: flex; flex-direction: column; gap: 14px; }
.bk-who { display: flex; align-items: center; gap: 0; color: var(--text-2); font-size: 13px; }
.bk-who .av { margin-right: -6px; box-shadow: 0 0 0 2px var(--surface); border-radius: 50%; }
.bk-who span:last-child { margin-left: 14px; }
.bk-when { align-self: flex-start; }
#bk-text { height: auto; min-height: 120px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.bk-tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 -8px; }
.bk-att:empty { display: none; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 13px; }
.bk-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; }
#bk-later[hidden], #bk-msg[hidden], #bk-what[hidden] { display: none; }
.bk-progress { max-width: 420px; }

/* подсказка «@»: врачи с фото */
.tg-suggest { max-height: min(420px, 60vh); overflow-y: auto; width: 320px; }
.sg-doc { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; background: #fff; border: 1px solid var(--border); }
.tg-suggest .sg-name small { display: block; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* PowerPoint */
.lb-slides { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px 8px calc(16px + var(--sab)); display: flex; flex-direction: column; align-items: center; }
.lb-slides > * { margin: 0 auto; }
body.has-selbar .toasts { bottom: 84px; }
@media (max-width: 760px) { body.has-selbar .toasts { bottom: calc(var(--tabbar-h) + 64px - var(--fit-gap, 0px)); } }
/* телефон: подсказка «@» прикреплена к полю ввода и открывается над ним */
.comp-field, #bk-msg .f { position: relative; }
.suggest.docked { position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% + 6px); width: auto; max-height: min(320px, 42vh); z-index: 30; }

/* закреплённые и общие пациенты */
.pin-mark { display: inline-grid; place-items: center; color: var(--brand); flex: none; margin-right: 2px; }
.pin-mark .icon { width: 14px; height: 14px; }
.co-mgr { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--surface-2); font-size: 13px; }
.mgr .extra { margin-left: 4px; }

/* ================= прейскурант ================= */
.pr-content { padding-bottom: 40px; }
.pr-toolbar { flex-wrap: wrap; gap: 8px; }
.pr-cat { height: 32px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; background: var(--surface); font: inherit; max-width: 260px; }
.pr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin: 0 24px; }
.pr-list { background: rgba(255,255,255,.92); border-radius: 16px; padding: 4px 12px 10px; box-shadow: 0 1px 2px rgba(30,31,33,.04), 0 6px 20px rgba(30,31,33,.05); }
.pr-group { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; padding: 16px 4px 6px; }
.pr-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
.pr-row:hover { background: var(--surface-2); }
.pr-row.on { background: var(--brand-tint); }
.pr-row .sel-box { margin-top: 2px; }
.pr-main { flex: 1; min-width: 0; }
.pr-name { font-weight: 500; line-height: 1.35; }
.pr-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-tint); border-radius: 6px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; }
.pr-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.pr-sub .link-btn { font-size: 12.5px; }
.pr-price { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.pr-price s { font-size: 12px; color: var(--text-3); }
.pr-edit-acts { display: flex; gap: 2px; }
.pr-comp { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; cursor: default; }
.pr-comp-g b { font-size: 12.5px; }
.pr-comp-g ul { margin: 2px 0 0; padding-left: 16px; font-size: 12.5px; color: var(--text-2); }
.pr-more { padding: 10px 4px; }
.pr-aside { position: sticky; top: 12px; background: var(--surface); border-radius: 16px; box-shadow: 0 1px 2px rgba(30,31,33,.04), 0 6px 20px rgba(30,31,33,.07); }
.pr-aside-mob { display: none; }
.pr-aside-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100dvh - 120px); overflow-y: auto; }
.pr-aside-head { display: flex; align-items: center; justify-content: space-between; }
.pr-aside-head h3 { margin: 0; }
.pr-sel { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.pr-sel-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.pr-sel-row b { white-space: nowrap; }
.pr-totals { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.pr-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-disc input { width: 70px; height: 32px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; text-align: right; font: inherit; }
.pr-disc .people-seg button { padding: 4px 10px; }
.pr-off { color: var(--danger); white-space: nowrap; }
.pr-total { font-size: 17px; border-top: 1px solid var(--border); padding-top: 8px; }
.pr-total b { color: var(--brand-ink); }
.pr-editing { margin: 0 24px 12px; align-items: center; }
.pr-to { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pr-find { position: relative; }
.pr-found { display: flex; flex-direction: column; }
.pr-found button { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 7px 6px; border-radius: 8px; text-align: left; font: inherit; cursor: pointer; }
.pr-found button:hover { background: var(--surface-2); }
.pr-found small { display: block; color: var(--text-3); font-size: 12px; }
#pr-text { height: auto; min-height: 220px; padding: 10px 12px; resize: vertical; line-height: 1.45; font-size: 13.5px; }
.pr-item-form textarea { height: auto; padding: 8px 10px; line-height: 1.4; }
.pr-item-form .modal-body { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) {
  .pr-layout { display: block; margin: 0 12px; }
  .pr-list { padding: 4px 6px 90px; }
  .pr-row { padding: 10px 4px; }
  .pr-comp { grid-template-columns: 1fr; }
  .pr-editing { margin: 0 12px 10px; }
  .pr-aside { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(var(--tabbar-h) + 8px - var(--fit-gap, 0px)); z-index: 30; }
  .pr-aside-mob { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
  .pr-aside-mob span { flex: 1; }
  .pr-aside-mob .icon:last-child { transform: rotate(180deg); transition: transform .2s; }
  .pr-aside.sheet-open .pr-aside-mob .icon:last-child { transform: none; }
  .pr-aside:not(.sheet-open) .pr-aside-body { display: none; }
  .pr-aside-body { max-height: 65dvh; border-top: 1px solid var(--border); }
  .pr-cat { max-width: 100%; flex: 1 1 100%; }
}

/* чекапы в карточке пациента */
.ck { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.ck-head { display: flex; align-items: flex-start; gap: 8px; }
.ck-total { white-space: nowrap; color: var(--brand-ink); }
.ck-items { margin-top: 6px; }
.ck-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; border-top: 1px dashed var(--border); }
.ck-item .icon-btn { opacity: .5; }
.ck-item:hover .icon-btn { opacity: 1; }
.ck-disc { margin-top: 4px; font-size: 12.5px; }

/* памятки */
.memo-wrap { margin: 0 24px; display: flex; flex-direction: column; gap: 12px; }
.memo-add .np-rem-grid { margin-bottom: 10px; }
.memo-add textarea { height: auto; padding: 8px 10px; }
.memo-add .btn { margin-top: 10px; }
.memo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
/* карточка памятки: полоска — цвет оформления PDF, внизу — открыть и переводы */
.memo.card { --memo: #7ccfb4; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px 18px;
  overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.memo.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--memo); }
.memo.card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.memo[data-theme="sun"] { --memo: #f2c94c; }
.memo[data-theme="peach"] { --memo: #f4a68a; }
.memo[data-theme="sky"] { --memo: #7fb8e6; }
.memo[data-theme="lab"] { --memo: #9cc95a; }
.memo[data-theme="file"] { --memo: var(--border-strong); }
.memo-head { display: flex; align-items: flex-start; gap: 6px; }
.memo-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.memo-acts { display: flex; gap: 0; margin: -6px -6px 0 0; opacity: 0; transition: opacity .15s; }
.memo.card:hover .memo-acts, .memo-acts:focus-within { opacity: 1; }
.memo-acts .icon-btn { width: 30px; height: 30px; }
.memo-text { font-size: 13px; line-height: 1.45; color: var(--text-2); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.memo-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.memo-pdf { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; margin-left: -4px;
  border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.memo-pdf:hover { background: var(--surface-2); }
.memo-pdf-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px;
  background: color-mix(in srgb, var(--memo) 22%, var(--surface)); color: var(--text); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.memo-pdf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.memo-pdf small { flex: none; color: var(--text-3); font-size: 12px; }
@media (hover: none), (max-width: 760px) { .memo-acts { opacity: 1; } }
.memo.card { container-type: inline-size; }
@container (max-width: 300px) { .memo-foot:has(.memo-langs) .memo-pdf-name { display: none; } .memo-foot:has(.memo-langs) .memo-pdf { flex: none; } .memo-foot { justify-content: space-between; } }
button.file-chip { border: 0; cursor: pointer; font: inherit; }
@media (max-width: 760px) { .memo-wrap { margin: 0 12px 90px; } }

/* распознанный текст (голосовое, фото) */
.text-result textarea { width: 100%; min-height: 200px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; font: inherit; line-height: 1.45; resize: vertical; }
.text-result .modal-foot { flex-wrap: wrap; }
body[data-view="prices"] .fab { display: none !important; }

/* скидка: поле и %/сум в строке, сумма скидки — строкой ниже (в узкой колонке не вылезает за край) */
.pr-disc-in { display: flex; align-items: center; gap: 6px; }
.pr-off-row[hidden] { display: none !important; }
.pr-off-row { margin-top: -4px; }
.memo-edit .modal-body { display: flex; flex-direction: column; gap: 10px; }
.memo-edit textarea, .memo-add textarea { height: auto; min-height: 90px; padding: 8px 10px; line-height: 1.45; resize: vertical; }
.memo-edit .bk-tools, .memo-add .bk-tools { margin-top: 4px; }

/* выбор части картинки для распознавания */
.overlay.over-lb { z-index: 100; }  /* поверх просмотра картинки */
.modal.dialog.crop-dlg { width: min(900px, 100%); }
.crop-hint { margin: 0 0 10px; }
.crop-stage { position: relative; display: flex; justify-content: center; background: #1d2329; border-radius: 10px; padding: 8px;
  touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.crop-stage img { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; pointer-events: none; }
.crop-box { position: absolute; border: 2px solid var(--brand); border-radius: 4px; pointer-events: none; }
.crop-shade { position: absolute; pointer-events: none; display: block !important; }
.crop-n { position: absolute; left: -2px; top: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px 0 6px 0; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.crop-x { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: var(--danger); color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.crop-x .icon { width: 12px; height: 12px; stroke-width: 3; }
@media (hover: none) { .crop-x { width: 30px; height: 30px; top: -15px; right: -15px; } }
.crop-stage { overflow: visible; }

@media (max-width: 760px) {
  .crop-stage img { max-height: 55dvh; }
  .crop-dlg .modal-foot { flex-wrap: wrap; }
}

/* телефон: долгое нажатие на пациенте начинает выбор — без выделения текста и меню iOS */
@media (max-width: 760px) { .mrow { -webkit-user-select: none; user-select: none; } }
/* «@» в окне рассылки: список пониже, чтобы над клавиатурой помещались и он, и поле */
.suggest.inline { position: static; width: auto; max-height: min(220px, 30vh); margin-bottom: 6px; animation: none; }
.fit-info { font-size: 11px; margin: 14px 0 0; opacity: .7; }

/* список пациентов порциями */
.pl-more { display: flex; justify-content: center; padding: 6px 0 90px; }
.pl-total { font-size: 12px; color: var(--text-3); padding: 6px 8px 2px; }
.chip.pl-active { flex: none; }

/* метки пациентов */
.tchips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; min-width: 0; }
.tchip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--tc, #8A94A6) 15%, transparent); color: color-mix(in srgb, var(--tc, #8A94A6) 72%, var(--text)); }
.tchip.sm { height: 18px; padding: 0 6px; font-size: 11px; border-radius: 9px; }
.tchip.more { --tc: #8A94A6; }
/* имя важнее меток: сжимаются сначала метки */
.cell-name .nm { flex-shrink: 0; max-width: 70%; }
.cell-name .tchips { margin-left: 6px; flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }
.mrow-tags { margin-top: 3px; }
.tag-val, .chat-val { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 0; min-width: 0; }
.last-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
.tdot { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); flex: none; margin: 0 4px; }
.tags-modal { max-width: 640px; }
.tags-modal.wide { max-width: 880px; }
.tags-modal .modal-foot { flex-wrap: wrap; }
.tag-group + .tag-group { margin-top: 14px; }
.tag-group-name { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.tag-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-opt { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.tag-opt .icon { display: none; width: 14px; height: 14px; }
.tag-opt.on { background: color-mix(in srgb, var(--tc) 16%, var(--surface)); border-color: var(--tc); color: color-mix(in srgb, var(--tc) 70%, var(--text)); font-weight: 600; }
.tag-opt.on .icon { display: inline-block; }
.tag-note { margin: 16px 0 0; font-size: 12px; }
.tag-admin-row { display: grid; grid-template-columns: 34px minmax(150px, 1.2fr) 120px 2fr 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.tag-admin-row input[type=color] { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.tag-admin-row input:not([type=color]) { height: 34px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; min-width: 0; }
@media (max-width: 760px) {
  .tag-admin-row { grid-template-columns: 34px 1fr 32px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .tag-admin-row .grp, .tag-admin-row .hint { grid-column: 2 / 3; }
}
.chip.pl-tag.on { background: color-mix(in srgb, var(--tc) 16%, var(--surface)); border-color: var(--tc); color: var(--text); }
.chip .badge { height: 18px; line-height: 18px; min-width: 18px; font-size: 11px; margin-left: 2px; }

/* ждут ответа */
.wait-for { font-size: 12px; font-weight: 700; color: var(--warn); white-space: nowrap; }
.wait-cell { display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.unread-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; margin-left: 6px; flex: none; }
.mrow-side .unread-n { margin-left: 0; }
.wait-row { padding: 0; }
.wait-row .grow-btn { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 8px 6px; border: 0; background: none; text-align: left;
  color: inherit; font: inherit; cursor: pointer; }
.wait-row .grow { min-width: 0; flex: 1; }

/* архив: на компьютере — кнопка вверху справа, на телефоне — потянуть список вниз */
.pl-arch-btn .n, .pl-archive .n { font-size: 12px; color: var(--text-3); font-weight: 600; }
.pl-archive { display: flex; align-items: center; gap: 12px; width: 100%; max-height: 0; overflow: hidden; padding: 0 8px; border: 0; background: none;
  text-align: left; color: inherit; font: inherit; transition: max-height .2s, padding .2s; }
.pl-archive.ready, .pl-archive.shown { max-height: 64px !important; padding: 10px 8px; }
.pl-archive.shown { border-bottom: 1px solid var(--border); }
.pl-archive .arch-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; color: var(--text-3); flex: none; }
.pl-archive .grow { min-width: 0; flex: 1; }
.pl-archive small { display: block; font-size: 12px; color: var(--text-3); }
.pl-archive.ready .arch-ico { background: var(--brand); color: #fff; }
body[data-view="patients"] #content { overscroll-behavior-y: contain; }
.chips-sep { flex: none; width: 1px; align-self: stretch; margin: 4px 2px; background: var(--border-strong); }
.chip { flex: none; }
@media (max-width: 760px) {
  /* архив и «ждут ответа»: «назад» — значок слева от поиска, поиск занимает остальное */
  .topbar-right:has(.pl-back) .search { width: auto !important; flex: 1; min-width: 0; order: 0; }
  .topbar .pl-back { order: -1; flex: none; height: 42px; width: 42px; padding: 0; justify-content: center; border-radius: 12px; background: var(--surface-2); }
  .pl-back span { display: none; }
}
@media (max-width: 760px) {
  /* настройки: подпись не сжимается в столбик рядом с выпадающим списком — список уходит на строку ниже */
  .set-row .grow { flex: 1 1 200px; }
  .set-row select { max-width: 100%; }
  /* кнопки внизу окон «В текст» и «Текст с картинки» — в строку по ширине, без вылезания за край */
  .crop-dlg .modal-foot, .text-result .modal-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .crop-dlg .modal-foot .grow { display: none; }
  .crop-dlg .modal-foot .btn, .text-result .modal-foot .btn { width: 100%; min-width: 0; justify-content: center; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crop-dlg .modal-foot .btn.primary { grid-column: 1 / -1; order: -1; }
  .text-result .modal-foot .btn.primary { grid-column: 1 / -1; order: -1; }
}

/* последнее сообщение в списке пациентов */
.list-head, .row { grid-template-columns: minmax(200px, 2fr) 140px minmax(110px, .9fr) 120px 130px minmax(160px, 1.6fr); }
.row .last-msg { padding-right: 10px; }
.last-msg.fresh { color: var(--text); font-weight: 600; }
.row .last-msg { display: flex; align-items: center; gap: 8px; }
.lm-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-time { flex: none; font-size: 11px; color: var(--text-3); font-weight: 400; }
.mrow-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.mrow-sub.last-msg { color: var(--text-2); }
/* сортировка рядом с поиском */
.pl-sort { flex: none; }
@media (max-width: 760px) {
  .topbar-right:has(.pl-sort) .search, .topbar-right:has(.pl-back) .search { width: auto !important; flex: 1; min-width: 0; order: 0; }
  .topbar .pl-sort { order: 1; height: 42px; width: 42px; padding: 0; justify-content: center; border-radius: 12px; background: var(--surface-2); }
}
/* метки прямо в карточке */
.tag-inline { grid-column: 1 / -1; padding: 6px 0 10px; }
.tag-inline .tag-group + .tag-group { margin-top: 8px; }
.tag-inline .link-btn { margin-top: 8px; }
.select-chip.on { border-color: var(--brand); color: var(--brand-ink); }
/* предпросмотр переписки */
.modal.peek { max-width: 520px; }
.peek .modal-head h2 { display: flex; align-items: center; gap: 8px; }
.peek-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; padding: 4px 2px; }
.peek-day { align-self: center; font-size: 12px; color: var(--text-3); padding: 6px 0 2px; }
.peek-msg { align-self: flex-start; max-width: 82%; background: var(--surface-2); border-radius: 14px 14px 14px 4px; padding: 7px 10px 5px;
  font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.peek-msg.out { align-self: flex-end; background: var(--brand-tint); border-radius: 14px 14px 4px 14px; }
.peek-media { color: var(--text-2); }
.peek-time { display: block; text-align: right; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.peek-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
@media (max-width: 760px) {
  .peek-list { max-height: none; }
  .peek .modal-foot { flex-wrap: wrap; gap: 8px; }
  .peek .modal-foot .grow { display: none; }
  .peek-note { width: 100%; justify-content: center; }
  .peek #pk-open { width: 100%; justify-content: center; }
}

/* профиль на телефоне — справа от приветствия */
.dash-hello { position: relative; }
.dash-me { position: absolute; top: 0; right: 0; border: 0; padding: 0; background: none; border-radius: 50%; }
.dash-me .av { box-shadow: 0 0 0 3px var(--surface); }
@media (max-width: 760px) { .dash-hello { padding-right: 52px; } }
@media (min-width: 761px) { .dash-me { display: none; } }

/* стикеры */
.tgc-sticker { display: block; width: 160px; height: 160px; object-fit: contain; }
.tgc-msg:has(.tgc-sticker), .tgc-bubble:has(.tgc-sticker) { background: none !important; box-shadow: none !important; padding-left: 0; padding-right: 0; }
.tgc-picker { position: fixed; z-index: 90; width: 340px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px; animation: fade .1s; }
.pk-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.pk-tabs button, .pk-sets button { border: 0; background: none; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.pk-tabs button.on, .pk-sets button.on { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.pk-sets { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.pk-emoji { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); max-height: 240px; overflow: hidden auto; }
.pk-emoji button { border: 0; background: none; font-size: 22px; height: 38px; border-radius: 8px; cursor: pointer; }
.pk-emoji button:hover, .pk-stickers button:hover { background: var(--surface-2); }
.pk-stickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-height: 280px; overflow: hidden auto; }
.pk-stickers button { border: 0; background: none; padding: 4px; border-radius: 10px; aspect-ratio: 1; cursor: pointer; }
.pk-stickers img { width: 100%; height: 100%; object-fit: contain; }
.pk-wait { grid-column: 1 / -1; padding: 24px 8px; text-align: center; color: var(--text-3); font-size: 13px; }
@media (max-width: 760px) { .tgc-picker { left: 8px !important; right: 8px; width: auto; } .tgc-sticker { width: 130px; height: 130px; } }

/* список: последнее сообщение под именем */
.list-head, .row { grid-template-columns: minmax(260px, 3fr) 150px minmax(130px, 1fr) 150px 90px; }
.nm-wrap { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nm-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nm-msg { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.nm-msg.fresh { color: var(--text); font-weight: 600; }
.row:has(.nm-msg) { min-height: 54px; }
.lm-when { font-size: 12px; text-align: right; padding-right: 14px; }

/* реакции */
.tgc-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tgc-react { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); font-size: 14px; cursor: pointer; }
.tgc-react span { font-size: 12px; color: var(--text-2); }
.tgc-react.me { background: var(--brand); border-color: var(--brand); }
.tgc-react.me span { color: #fff; }
.menu-head { padding: 4px 4px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.react-row { display: flex; gap: 2px; flex-wrap: wrap; }
.react-row button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; font-size: 20px; cursor: pointer; transition: transform .1s; }
.react-row button:hover { background: var(--surface-2); transform: scale(1.15); }
.react-row button.on { background: var(--brand-tint); }
.sheet .menu-head { padding: 6px 12px 10px; }
.sheet .react-row { justify-content: space-between; }
@media (max-width: 760px) { .tgc-bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }

/* список: правка заметки, файлов и меток прямо в строке */
.list-head, .row { grid-template-columns: minmax(250px, 2.4fr) 130px minmax(110px, .9fr) minmax(160px, 1.5fr) minmax(120px, 1fr) minmax(140px, 1.2fr) 130px; }
.row { cursor: default; }
.row .cell-name { cursor: pointer; }
.list-head > div:first-child .sel-box { margin-right: 20px; }  /* заголовок «Пациент» — ровно над аватарками */
.nm-line { width: 100%; }
.nm-time { margin-left: auto; padding-left: 8px; font-size: 11.5px; color: var(--text-3); font-weight: 400; flex: none; }
.card-btn { flex: none; opacity: .45; }
.row:hover .card-btn { opacity: 1; }
.c-note, .c-files, .c-tags { min-width: 0; padding: 4px 8px; }
.row-note { font-size: 12.5px; color: var(--text-2); line-height: 1.35; max-height: 2.7em; overflow: hidden; border-radius: 6px; padding: 3px 6px;
  outline: 0; cursor: text; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-note:hover { background: var(--surface-2); }
.row-note:focus { max-height: none; display: block; background: var(--surface); box-shadow: 0 0 0 2px var(--brand-tint); color: var(--text); }
.row-note:empty::before { content: attr(data-placeholder); color: var(--text-3); }
.c-files { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.row-file { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; font-size: 12px; color: var(--text-2); text-decoration: none;
  background: var(--surface-2); border-radius: 6px; padding: 2px 6px; }
.row-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.row-file:hover { color: var(--brand-ink); }
.row-more { border: 0; background: none; font-size: 12px; color: var(--text-3); cursor: pointer; }
.row-add { opacity: .35; }
.row:hover .row-add { opacity: 1; }
.c-tags { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 3px; border-radius: 6px; }
.c-tags:hover { background: var(--surface-2); }
.c-tags.editing { cursor: default; background: var(--surface-2); }
.tchip.opt { border: 1px solid transparent; cursor: pointer; opacity: .5; }
.tchip.opt.on { opacity: 1; border-color: var(--tc); }
.row-ph { font-size: 12px; color: var(--text-3); display: inline-flex; gap: 3px; align-items: center; opacity: 0; }
.row:hover .row-ph { opacity: 1; }
@media (max-width: 1500px) { .list-head, .row { grid-template-columns: minmax(240px, 2.4fr) 130px minmax(150px, 1.5fr) minmax(110px, 1fr) minmax(130px, 1.2fr) 120px; }
  .c-tg { display: none; } }
@media (max-width: 1250px) { .list-head, .row { grid-template-columns: minmax(230px, 2.4fr) minmax(140px, 1.4fr) minmax(100px, 1fr) minmax(120px, 1.2fr) 110px; }
  .c-phone { display: none; } }
/* буквы в кружках — чисто белые */
.av { color: #fff !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .12); }

/* ---- переписка в духе Telegram: фон с узором, белые и зелёные «пузыри» ---- */
.tgc { --tg-in: #fff; --tg-out: #e7fbd7; --tg-text: #111; --tg-meta: #6b8a6b; --tg-pill: rgba(40, 70, 50, .32);
  --tg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffffff' stroke-opacity='.38' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='18' cy='20' r='6'/%3E%3Cpath d='M70 14v12M64 20h12'/%3E%3Cpath d='M100 52c-4-6 6-10 8-4 2-6 12-2 8 4l-8 8z'/%3E%3Crect x='28' y='60' width='14' height='10' rx='3'/%3E%3Cpath d='M80 92l6 6 10-12'/%3E%3Ccircle cx='16' cy='100' r='3'/%3E%3Cpath d='M48 100c4-4 8 4 12 0s8 4 12 0'/%3E%3Cpath d='M98 18l4 4m0-4l-4 4'/%3E%3C/svg%3E");
  --tg-bg: linear-gradient(160deg, #cfe6bd, #a9d39a 55%, #8fc59a); }
.tgc[data-bg="sky"] { --tg-bg: linear-gradient(160deg, #cfe3f2, #a8cbe6 55%, #8fb7de); --tg-out: #dff0ff; --tg-meta: #5d7fa0; --tg-pill: rgba(40, 70, 110, .3); }
.tgc[data-bg="sand"] { --tg-bg: linear-gradient(160deg, #f3e7cc, #e6d2a6 55%, #d9c08a); --tg-out: #fbf1d6; --tg-meta: #8a7550; --tg-pill: rgba(110, 85, 40, .3); }
.tgc[data-bg="lilac"] { --tg-bg: linear-gradient(160deg, #e9e1f6, #d2c2ef 55%, #bba6e6); --tg-out: #efe6ff; --tg-meta: #7a68a0; --tg-pill: rgba(80, 60, 120, .3); }
.tgc[data-bg="night"] { --tg-bg: linear-gradient(160deg, #1f2b36, #17212b 60%, #0f171f); --tg-in: #1e2c3a; --tg-out: #2b5278; --tg-text: #e9eef3;
  --tg-meta: #8aa3b8; --tg-pill: rgba(0, 0, 0, .35); }
.tgc[data-bg="plain"] { --tg-bg: var(--surface-2); --tg-pattern: none; --tg-pill: rgba(0, 0, 0, .18); }
.tgc .tgc-list { background: var(--tg-pattern), var(--tg-bg); background-size: 120px 120px, cover; background-attachment: local, scroll; }
.tgc .tgc-bubble { background: var(--tg-in); color: var(--tg-text); box-shadow: 0 1px 1px rgba(0, 0, 0, .13); border-radius: 14px 14px 14px 5px; }
.tgc .tgc-msg.out .tgc-bubble { background: var(--tg-out); border-radius: 14px 14px 5px 14px; }
.tgc .tgc-meta, .tgc .tgc-ticks { color: var(--tg-meta); }
.tgc .tgc-ticks.read { color: #4fae4e; }
.tgc[data-bg="night"] .tgc-ticks.read { color: #6ab3f3; }
.tgc .tgc-day, .tgc .tgc-who { background: var(--tg-pill); color: #fff; border-radius: 999px; padding: 2px 10px; box-shadow: none; }
.tgc .tgc-who { margin: 6px auto 8px; }
.tgc .tgc-acts .icon-btn { background: rgba(255, 255, 255, .85); border-radius: 50%; }
.tgc .tgc-quote { border-left: 3px solid #4fae4e; background: rgba(79, 174, 78, .1); border-radius: 4px; }
.chat-sw { background: var(--tg-bg); }
.chat-sw[data-bg="mint"] { background: linear-gradient(160deg, #cfe6bd, #8fc59a); }
.chat-sw[data-bg="sky"] { background: linear-gradient(160deg, #cfe3f2, #8fb7de); }
.chat-sw[data-bg="sand"] { background: linear-gradient(160deg, #f3e7cc, #d9c08a); }
.chat-sw[data-bg="lilac"] { background: linear-gradient(160deg, #e9e1f6, #bba6e6); }
.chat-sw[data-bg="night"] { background: linear-gradient(160deg, #1f2b36, #0f171f); }
.chat-sw[data-bg="plain"] { background: #eef0f2; }
.ai-prompt-f { margin: 14px 0 6px; }
.ai-prompt-f label { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; }
.ai-prompt-f textarea { width: 100%; min-height: 160px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; font: inherit;
  font-size: 13.5px; line-height: 1.45; resize: vertical; background: var(--surface); color: var(--text); }
.ai-prompt-f .muted { font-size: 12px; margin-top: 4px; }

/* медиа в переписке */
.tgc .tgc-photo { border-radius: 10px; }
.tgc-video-btn { position: relative; display: block; border: 0; padding: 0; background: #000; border-radius: 10px; overflow: hidden; cursor: pointer; margin-bottom: 4px; }
.tgc-video-btn video { display: block; max-width: 260px; max-height: 300px; pointer-events: none; }
.tgc-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.tgc-play .icon { width: 46px; height: 46px; padding: 12px; background: rgba(0, 0, 0, .45); border-radius: 50%; }
.tgc-voice { display: flex; align-items: center; gap: 6px; }
.tgc-voice audio { height: 38px; width: 230px; max-width: 100%; }
.tgc-stt-btn { flex: none; height: 26px; min-width: 34px; border: 0; border-radius: 13px; background: rgba(79, 174, 78, .16); color: #2f8a2e;
  font: 600 12px/1 var(--font); cursor: pointer; }
.tgc-stt-btn.on { background: #4fae4e; color: #fff; }
.tgc-stt-btn.busy { opacity: .6; cursor: progress; }
.tgc-stt { margin-top: 6px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; border-left: 3px solid rgba(79, 174, 78, .5); padding-left: 8px; }
.tgc-stt .tgc-tr-line { margin-top: 4px; }
.tgc-stt-tr { margin-top: 4px; color: var(--text-2); }
.tgc[data-bg="night"] .tgc-stt-tr { color: #b7c7d4; }
@media (max-width: 760px) { .tgc-video-btn video { max-width: 220px; } .tgc-voice audio { width: 190px; } }

/* реакции: семь под рукой, остальные — по «⌄» */
.react-row { max-width: 330px; }
.react-row .x { display: none; }
.react-row.all .x { display: inline-block; }
.react-row .more { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-2); cursor: pointer; display: inline-grid; place-items: center; }
.react-row .less { display: none; }
.react-row.all .more { display: none; }
/* все реакции открыты: сверху — «Назад» к короткому ряду */
.react-row.all .less { display: inline-flex; order: -1; flex: 0 0 100%; align-items: center; gap: 4px; height: 30px; padding: 0 8px; margin-bottom: 4px;
  border: 0; border-radius: 8px; background: var(--surface-2); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer;
  position: sticky; top: 0; z-index: 1; }
.react-row.all { max-height: 240px; overflow-y: auto; }
.sheet .react-row { max-width: none; }

/* переслать */
.modal.fw-modal { max-width: 480px; }
.fw-seg { margin-bottom: 10px; }
.fw-quote { font-size: 13px; color: var(--text-2); border-left: 3px solid var(--brand); padding: 4px 10px; margin-bottom: 10px; white-space: pre-wrap; max-height: 80px; overflow: hidden; }
.fw-search { width: 100% !important; margin-bottom: 8px; }
.fw-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.fw-item { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 8px 6px; border-radius: 10px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.fw-item:hover { background: var(--surface-2); }
.fw-item small { display: block; font-size: 12px; color: var(--text-3); }
.fw-item .ch-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; }
.fw-note { font-size: 12px; }

/* в переписке шапка карточки — компактная, и на компьютере тоже */
#pane.tg-mode .p-head { padding: 6px 0 2px; gap: 10px; align-items: center; }
#pane.tg-mode .p-photo .av { --s: 38px !important; }
#pane.tg-mode .p-photo .over, #pane.tg-mode .refresh-btn, #pane.tg-mode .tg-name, #pane.tg-mode .pane-top > .banner { display: none; }
#pane.tg-mode .p-names input { font-size: 16px; padding: 2px 4px; }
#pane.tg-mode .pane-top { padding-top: 6px; padding-bottom: 0; }
/* свой пациент — сначала «Переписка» */
.pane-tabs.own .t-tg { order: -1; }
.tgc-gen { font-weight: inherit; }
/* телефон: у сообщений нет кнопок — меню открывается долгим нажатием */
@media (max-width: 760px) { .tgc .tgc-acts { display: none; } }

/* голосовое, как в Telegram: круглая кнопка и «волна» в цвет переписки */
.tgc { --tg-accent: #4fae4e; }
.tgc[data-bg="sky"] { --tg-accent: #3a8fd6; }
.tgc[data-bg="sand"] { --tg-accent: #b08a3c; }
.tgc[data-bg="lilac"] { --tg-accent: #8a6bd1; }
.tgc[data-bg="night"] { --tg-accent: #6ab3f3; }
.tgc[data-bg="plain"] { --tg-accent: var(--brand); }
.tgv { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 2px 0; }
.tgv-play { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--tg-accent); color: #fff; display: grid;
  place-items: center; cursor: pointer; }
.tgv-play .icon { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; }
.tgv-body { flex: 1; min-width: 0; }
.tgv-wave { display: flex; align-items: flex-end; gap: 2px; height: 24px; cursor: pointer; }
.tgv-wave i { flex: 1; min-width: 2px; max-width: 3px; border-radius: 2px; background: var(--tg-accent); opacity: .35; }
.tgv-wave i.on { opacity: 1; }
.tgv-time { font-size: 12px; color: var(--tg-meta); margin-top: 3px; }
.tgc-stt-btn { background: color-mix(in srgb, var(--tg-accent) 18%, transparent); color: var(--tg-accent); }
.tgc-stt-btn.on { background: var(--tg-accent); }

/* предпросмотр как в Telegram */
.peek-ov { position: fixed; inset: 0; z-index: 80; }
.peek-ov.mob { background: rgba(20, 30, 25, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade .12s; }
.peek-pop { position: fixed; width: 380px; display: flex; flex-direction: column; gap: 8px; animation: fade .12s; }
.peek-ov.mob .peek-pop { left: 12px; right: 12px; top: 12px; width: auto; bottom: 12px; justify-content: flex-start; }
.peek-card { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); display: flex; flex-direction: column; }
.peek-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); cursor: pointer; }
.peek-head b { display: block; font-size: 15px; }
.peek-head small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); }
.peek-card .peek-list { max-height: 380px; min-height: 120px; padding: 10px 12px; background: var(--tg-pattern), var(--tg-bg); background-size: 120px 120px, cover; }
.peek-ov.mob .peek-card .peek-list { max-height: 52vh; }
.peek-card .peek-msg { background: var(--tg-in); color: var(--tg-text); box-shadow: 0 1px 1px rgba(0, 0, 0, .13); }
.peek-card .peek-msg.out { background: var(--tg-out); }
.peek-card .peek-time { color: var(--tg-meta); }
.peek-card .tgc-day { align-self: center; }
.peek-empty { margin: auto; color: #fff; background: var(--tg-pill); padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.peek-acts { background: var(--surface); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .2); padding: 4px; display: flex; flex-direction: column; }
.peek-ov:not(.mob) .peek-acts { box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.peek-acts button, .peek-acts a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; border-radius: 10px;
  font: inherit; font-size: 14.5px; color: var(--text); text-decoration: none; cursor: pointer; text-align: left; }
.peek-acts button:hover, .peek-acts a:hover { background: var(--surface-2); }
.peek-acts .danger { color: var(--danger); }
.peek-ov.mob .peek-acts { align-self: flex-start; min-width: 240px; }
.peek-card.tgc { flex: none; min-height: 0; }

/* порядок: моё напоминание, заметка, метки, приложения; напоминание ставится прямо в строке */
/* колонки сжимаются под ширину окна, а не вылезают за таблицу: иначе «Приложения» оказывались справа от белой
   подложки и у страницы появлялась прокрутка вбок */
.list-head, .row { grid-template-columns: minmax(200px, 2.3fr) minmax(90px, 130px) minmax(80px, .9fr) minmax(150px, 185px) minmax(80px, 2fr) minmax(70px, 1fr); }
@media (max-width: 1500px) { .list-head, .row { grid-template-columns: minmax(190px, 2.3fr) minmax(90px, 130px) minmax(150px, 185px) minmax(80px, 2fr) minmax(70px, 1fr); } }
@media (max-width: 1250px) { .list-head, .row { grid-template-columns: minmax(170px, 2.3fr) minmax(140px, 185px) minmax(70px, 2fr) minmax(60px, 1fr); } }
@media (min-width: 761px) { .list { min-width: 0; } body[data-view="patients"] .content { overflow-x: hidden; } }
.c-rem { min-width: 0; padding: 4px 8px; cursor: pointer; border-radius: 6px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.c-rem:not(.editing):hover { background: var(--surface-2); }
.c-rem small { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-rem.editing { cursor: default; background: var(--surface-2); gap: 4px; padding: 6px; }
.c-rem.editing input { width: 100%; min-width: 0; height: 28px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 0 6px; font: inherit;
  font-size: 12px; background: var(--surface); color: var(--text); }
.rr-btns { display: flex; align-items: center; gap: 2px; }
.rr-btns .btn { height: 26px; padding: 0 8px; font-size: 12px; }

/* предпросмотр на телефоне: окошко по высоте содержимого — ниже него нажатие закрывает */
.peek-ov.mob .peek-pop { bottom: auto; max-height: calc(100% - 24px); }
.mrow .av img, .peek-ov img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.mrow .av { -webkit-touch-callout: none; }

/* таблица пациентов без внутренних отступов: отступы — у строк, выделение закрашивает строку до краёв белой подложки */
@media (min-width: 761px) {
  body[data-view="patients"] .list { padding: 0; overflow: clip; }
  .list-head > div:first-child, .row > div:first-child { padding-left: 16px; }
  .list-head > div:last-child, .row > div:last-child { padding-right: 16px; }
  .row .cell-name { position: relative; }
  /* скрепка — слева от аватарки, между галочкой и аватаркой, строка не сдвигается */
  .row .cell-name .pin-mark { position: absolute; left: 39px; top: 50%; transform: translateY(-50%); margin: 0; }
  .row:hover { background: rgba(58, 170, 140, .05); }
  .row.picked { background: rgba(58, 170, 140, .10); }
  .row.selected { background: rgba(58, 170, 140, .17); box-shadow: inset 3px 0 0 var(--brand); }
  .row.selected.picked { background: rgba(58, 170, 140, .2); }
}
/* значок карточки — заметный, ровно по центру строки, как пара к аватарке */
.card-btn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); opacity: 1; margin-left: 8px;
  transition: color .1s, border-color .1s, background .1s; }
.card-btn .icon { width: 16px; height: 16px; }
.row:hover .card-btn { opacity: 1; }
.card-btn:hover { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-tint); }
/* панель выбранных: по ширине кнопок, по центру списка; не помещается — кнопки без подписей */
.selbar > * { flex: none; }
.selbar .sel-count { margin-right: 6px; }
@media (min-width: 761px) and (max-width: 1250px) { .selbar .btn.desk-flex span { display: none; } .selbar .btn.desk-flex { padding: 0 9px; } }
.pl-chips .chip[hidden] { display: none; }
/* имя сжимается первым — время и значки не наезжают на кнопку карточки */
.nm-line { overflow: hidden; }
.nm-line .nm { flex: 0 1 auto; min-width: min(90px, 45%); max-width: none; white-space: nowrap; }
.nm-line > :not(.nm) { flex: none; }
/* коллеги: без «Меток» и «Приложений» — имени, напоминанию и заметке больше места */
.list.coll .list-head, .list.coll .row { grid-template-columns: minmax(240px, 2.6fr) minmax(110px, 150px) minmax(110px, 1fr) minmax(150px, 210px) minmax(140px, 2fr); }
@media (max-width: 1500px) { .list.coll .list-head, .list.coll .row { grid-template-columns: minmax(220px, 2.6fr) minmax(110px, 150px) minmax(150px, 210px) minmax(130px, 2fr); } }
@media (max-width: 1250px) { .list.coll .list-head, .list.coll .row { grid-template-columns: minmax(190px, 2.6fr) minmax(150px, 200px) minmax(110px, 2fr); } }
.nav-item .av-star .icon { width: 12px; height: 12px; }
.pl-chips .chips-sep[hidden] { display: none; }
.chip .badge[hidden] { display: none; }
.chip .pl-unread-mine, .chip .pl-unread-coll { background: var(--danger); color: #fff; margin-left: 6px; }

/* коллега: своё фото со звёздочкой; в шапке — аватарка (сменить фото) и имя, сразу под ними переписка */
.av-coll { position: relative; display: inline-flex; flex: none; }
.coll-star { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #FFD15C, #F5A524); box-shadow: 0 0 0 2px var(--surface); }
.coll-star .icon { width: 9px; height: 9px; fill: #fff; stroke: #fff; }
.pane-title.coll-title { display: flex !important; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0 4px; }
.pane-title.coll-title > * { opacity: 1 !important; transform: none !important; }
.coll-photo { position: relative; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; display: grid; }
.coll-photo .over { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .35);
  color: #fff; opacity: 0; transition: opacity .12s; }
.coll-photo:hover .over { opacity: 1; }
.coll-name { border: 0; background: none; padding: 4px 6px; border-radius: 8px; font: inherit; font-size: 16px; font-weight: 600; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; text-align: left; }
.coll-name:hover { background: var(--surface-2); }

/* ---- шапка карточки: аватарка и имя, переключатель «Переписка / Карточка» ---- */
.pane-title.who { display: flex !important; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0 2px; }
.pane-title.who > * { opacity: 1 !important; transform: none !important; }
.pane-seg { display: flex; flex: none; padding: 3px; gap: 2px; border-radius: 12px; background: rgba(0, 0, 0, .05); }
.pane-seg button { display: flex; align-items: center; gap: 5px; border: 0; background: none; border-radius: 9px; padding: 5px 10px;
  font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.pane-seg button.on { background: var(--surface); color: var(--brand-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
@media (max-width: 760px) { .pane-seg button span { display: none; } .pane-seg button { padding: 6px 8px; } }

/* ---- островки, как в Telegram: шапка и поле ввода парят над фоном, полупрозрачные, со стеклом ---- */
:root { --glass: rgba(255, 255, 255, .7); --glass-border: rgba(255, 255, 255, .55); --glass-shadow: 0 2px 14px rgba(20, 30, 40, .1); }
.glass { background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }

/* переписка с пациентом и коллегой: фон — на всю карточку, шапка — над ним */
#pane.tg-mode .pane-bar { position: absolute; z-index: 8; top: 8px; left: 8px; right: 8px; min-height: 52px; padding: 6px 8px; border-radius: 20px;
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
#pane.tg-mode .pane-body { flex: 1; min-height: 0; }
#pane.tg-mode .tgc { position: relative; background: var(--tg-pattern), var(--tg-bg); background-size: 120px 120px, cover; }
#pane.tg-mode .tgc .tgc-list { background: none; padding-top: 74px; }
#pane.tg-mode .tgc-contacts, #pane.tg-mode .tgc-top:not([hidden]) { position: absolute; z-index: 6; top: 70px; left: 8px; right: 8px; border-radius: 16px;
  background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-border); }
#pane.tg-mode .tgc:has(.tgc-contacts) .tgc-list { padding-top: 120px; }
#pane.tg-mode .tgc-bar:not([hidden]) { margin: 0 8px; padding: 8px 14px 4px; border: 1px solid var(--glass-border); border-bottom: 0; border-radius: 20px 20px 0 0;
  background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#pane.tg-mode .tgc-comp { margin: 0 8px 8px; border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
#pane.tg-mode .tgc-bar:not([hidden]) + .tgc-comp { border-top: 0; border-radius: 0 0 20px 20px; box-shadow: 0 8px 14px -6px rgba(20, 30, 40, .12); }
#pane.tg-mode .tgc-comp .comp-field textarea, #pane.tg-mode .tgc-comp .comp-field { background: rgba(255, 255, 255, .75); }
@media (max-width: 760px) {
  #pane.tg-mode .pane-bar { top: calc(6px + env(safe-area-inset-top)); left: 6px; right: 6px; padding: 4px 6px; }
  #pane.tg-mode { padding-top: 0; }
  #pane.tg-mode .tgc .tgc-list { padding-top: calc(70px + env(safe-area-inset-top)); }
  #pane.tg-mode .tgc-comp { margin: 0 6px calc(6px + var(--sab)); padding-bottom: 8px; }
}
/* тёмный фон переписки — тёмное стекло */
#pane.tg-mode[data-bg="night"] { --glass: rgba(23, 33, 43, .72); --glass-border: rgba(255, 255, 255, .08); color: #e9eef3; }
#pane.tg-mode[data-bg="night"] .pane-bar .icon-btn, #pane.tg-mode[data-bg="night"] .coll-name, #pane.tg-mode[data-bg="night"] .tgc-comp .btn { color: #e9eef3; }
#pane.tg-mode[data-bg="night"] .pane-seg { background: rgba(255, 255, 255, .08); }
#pane.tg-mode[data-bg="night"] .pane-seg button { color: #b7c7d4; }
#pane.tg-mode[data-bg="night"] .pane-seg button.on { background: rgba(255, 255, 255, .14); color: #fff; }
#pane.tg-mode[data-bg="night"] .tgc-comp .comp-field, #pane.tg-mode[data-bg="night"] .tgc-comp textarea { background: rgba(255, 255, 255, .08); color: #e9eef3; }

/* общий чат и тред: шапка и поле ввода — тоже островки над перепиской */
.ch-main, .ch-thread { position: relative; }
.ch-main > .ch-head, .ch-thread > .ch-head { position: absolute; z-index: 6; top: 8px; left: 8px; right: 8px; border-radius: 20px; min-height: 52px;
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.ch-main > .ch-msgs, .ch-thread > .ch-msgs { padding-top: 72px; }
.ch-main > .ch-timer-slot { position: absolute; z-index: 5; top: 66px; left: 0; right: 0; padding: 6px 8px 0; }
.ch-main:has(.ch-timer-slot:not(:empty)) > .ch-msgs { padding-top: 140px; }
.ch-main > .composer, .ch-thread > .composer { margin: 0 8px 8px; border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
@media (max-width: 760px) {
  .ch-main > .ch-head, .ch-thread > .ch-head { top: calc(6px + env(safe-area-inset-top)); left: 6px; right: 6px; padding: 4px 8px !important; }
  .ch-main > .ch-msgs, .ch-thread > .ch-msgs { padding-top: calc(70px + env(safe-area-inset-top)); }
  .ch-main > .composer, .ch-thread > .composer { margin: 0 6px 6px; }
}
/* телефон и Telegram в строке — тоже открывают контакт */
.row .c-phone, .row .c-tg { cursor: pointer; }

/* «Уточнить по контексту»: разговор с ИИ-помощником — островок над полем ввода, переписка сжимается, но видна */
.tgc-consult { flex: 0 1 auto; max-height: 55%; min-height: 0; display: flex; flex-direction: column; margin: 0 8px 6px; border-radius: 20px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(123, 104, 238, .25); box-shadow: 0 4px 18px rgba(60, 40, 140, .12); color: var(--text); }
.tgc-consult[hidden] { display: none; }
.cs-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px 14px; border-bottom: 1px solid rgba(123, 104, 238, .15); font-size: 13px; }
.cs-head .icon { color: #7B68EE; }
.cs-head span { color: var(--text-3); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-list { overflow-y: auto; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.cs-q { align-self: flex-end; max-width: 85%; background: #EEEAFE; color: #3b2f86; border-radius: 14px 14px 4px 14px; padding: 7px 11px; font-size: 14px; white-space: pre-wrap; }
.cs-a { align-self: flex-start; max-width: 100%; font-size: 14px; line-height: 1.5; }
.cs-a.err { color: var(--danger); }
.cs-wait { color: var(--text-3); font-style: italic; }
.cs-wait::after { content: "…"; animation: blink 1s infinite; }
.cs-acts { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; }
.cs-quote { margin: 6px 0; padding: 6px 10px 8px 12px; border-left: 3px solid #7B68EE; border-radius: 4px 12px 12px 4px; background: rgba(123, 104, 238, .08); }
.cs-quote-text { font-style: normal; }
.cs-send { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  background: #7B68EE; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; }
.cs-send:hover { background: #6a57e0; }
#pane.tg-mode[data-bg="night"] .cs-quote { background: rgba(123, 104, 238, .16); }
.cs-empty { color: var(--text-3); font-size: 13px; }
.cs-files { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; margin-bottom: 3px; opacity: .85; }
.cs-files span { display: inline-flex; align-items: center; gap: 3px; }
.tgc-bar-item.cs-for { color: #7B68EE; font-weight: 600; }
.tgc-comp.consult-mode { border-color: rgba(123, 104, 238, .45) !important; box-shadow: 0 0 0 2px rgba(123, 104, 238, .15), var(--glass-shadow) !important; }
.tgc-comp.consult-mode .tgc-send { background: #7B68EE; }
.tgc-comp.consult-mode .tgc-consult-btn { color: #7B68EE; font-weight: 600; }
#pane.tg-mode[data-bg="night"] .tgc-consult { background: rgba(23, 33, 43, .85); color: #e9eef3; }
#pane.tg-mode[data-bg="night"] .cs-q { background: rgba(123, 104, 238, .35); color: #fff; }

/* имя и фамилия в шапке: правятся на месте, в две строки, длинное — с «…» */
.who-name { min-width: 0; flex: 1; font-size: 15.5px; font-weight: 600; line-height: 1.25; color: var(--text); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 2px 4px; border-radius: 8px; cursor: text; }
.who-name:hover { background: rgba(0, 0, 0, .04); }
.who-name:focus-within { display: block; -webkit-line-clamp: unset; overflow: visible; background: var(--surface); box-shadow: 0 0 0 2px var(--brand-tint-2); }
.nm-ed { outline: none; }
.nm-ed:empty::before { content: attr(data-ph); color: var(--text-3); font-weight: 500; }
.nm-ed[data-nfield="last_name"]:empty::before { content: ""; }
.who-name:focus-within .nm-ed[data-nfield="last_name"]:empty::before { content: attr(data-ph); }
#pane.tg-mode[data-bg="night"] .who-name { color: #e9eef3; }
#pane.tg-mode[data-bg="night"] .who-name:focus-within { background: rgba(255, 255, 255, .1); }
/* переключатель «Переписка / Карточка» — нажатие в любом месте ведёт на другую вкладку */
.pane-seg { cursor: pointer; user-select: none; -webkit-user-select: none; }
.pane-seg > span { display: flex; align-items: center; gap: 5px; border-radius: 9px; padding: 5px 10px; font-size: 13px; color: var(--text-2); pointer-events: none; }
.pane-seg > span.on { background: var(--surface); color: var(--brand-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
#pane.tg-mode[data-bg="night"] .pane-seg > span { color: #b7c7d4; }
#pane.tg-mode[data-bg="night"] .pane-seg > span.on { background: rgba(255, 255, 255, .14); color: #fff; }
@media (max-width: 760px) {
  .pane-seg { padding: 3px; }
  .pane-seg > span { padding: 8px 11px; }
  .pane-seg > span > span { display: none; }
  .pane-seg .icon { width: 19px; height: 19px; }
  .who-name { font-size: 15px; }
}

/* прокрутка останавливается там, где кончается список: без пустого места снизу (раньше — запас под кнопку «+») */
body[data-view="patients"] .list { margin-bottom: 24px; }
.dash { padding-bottom: 28px; }
@media (max-width: 760px) {
  .content { padding-bottom: 0; }
  body[data-view="patients"] .mlist { margin-bottom: 12px; }
  .dash { padding-bottom: 14px; }
}
/* «Сохранено» — только надпись: на телефоне она лежала поверх переключателя и съедала нажатия */
.pane-bar .saved { pointer-events: none; }
.pane-title.who { white-space: normal; overflow: visible; }

/* ---- общий чат — в той же теме, что переписка (фон и узор из профиля), шапка и ввод — стекло ---- */
.chat.solo { --tg-in: #fff; --tg-out: #e7fbd7; --tg-text: #111; --tg-meta: #6b8a6b; --tg-pill: rgba(40, 70, 50, .32);
  --tg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffffff' stroke-opacity='.38' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='18' cy='20' r='6'/%3E%3Cpath d='M70 14v12M64 20h12'/%3E%3Cpath d='M100 52c-4-6 6-10 8-4 2-6 12-2 8 4l-8 8z'/%3E%3Crect x='28' y='60' width='14' height='10' rx='3'/%3E%3Cpath d='M80 92l6 6 10-12'/%3E%3Ccircle cx='16' cy='100' r='3'/%3E%3Cpath d='M48 100c4-4 8 4 12 0s8 4 12 0'/%3E%3Cpath d='M98 18l4 4m0-4l-4 4'/%3E%3C/svg%3E");
  --tg-bg: linear-gradient(160deg, #cfe6bd, #a9d39a 55%, #8fc59a); }
.chat.solo[data-bg="sky"] { --tg-bg: linear-gradient(160deg, #cfe3f2, #a8cbe6 55%, #8fb7de); --tg-out: #dff0ff; --tg-meta: #5d7fa0; --tg-pill: rgba(40, 70, 110, .3); }
.chat.solo[data-bg="sand"] { --tg-bg: linear-gradient(160deg, #f3e7cc, #e6d2a6 55%, #d9c08a); --tg-out: #fbf1d6; --tg-meta: #8a7550; --tg-pill: rgba(110, 85, 40, .3); }
.chat.solo[data-bg="lilac"] { --tg-bg: linear-gradient(160deg, #e9e1f6, #d2c2ef 55%, #bba6e6); --tg-out: #efe6ff; --tg-meta: #7a68a0; --tg-pill: rgba(80, 60, 120, .3); }
.chat.solo[data-bg="night"] { --tg-bg: linear-gradient(160deg, #1f2b36, #17212b 60%, #0f171f); --tg-in: #1e2c3a; --tg-out: #2b5278; --tg-text: #e9eef3;
  --tg-meta: #8aa3b8; --tg-pill: rgba(0, 0, 0, .35); }
.chat.solo[data-bg="plain"] { --tg-bg: var(--surface-2); --tg-pattern: none; --tg-pill: rgba(0, 0, 0, .18); }
.chat.solo .ch-main, .chat.solo .ch-thread { background: var(--tg-pattern), var(--tg-bg); background-size: 120px 120px, cover; }
.chat.solo .ch-thread { border-left: 1px solid rgba(0, 0, 0, .06); }
.chat.solo .msg:hover { background: rgba(255, 255, 255, .28); }
.chat.solo .day-sep span, .chat.solo .th-divider span { background: var(--tg-pill); color: #fff; }
.chat.solo .msg-head time, .chat.solo .msg-head .edited { color: var(--tg-meta); }

/* ---- «Ночь»: узор едва заметен, обводки мягкие, наведение — лёгкая подсветка, а не белая плашка ---- */
.tgc[data-bg="night"], .chat.solo[data-bg="night"] { --tg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='18' cy='20' r='6'/%3E%3Cpath d='M70 14v12M64 20h12'/%3E%3Cpath d='M100 52c-4-6 6-10 8-4 2-6 12-2 8 4l-8 8z'/%3E%3Crect x='28' y='60' width='14' height='10' rx='3'/%3E%3Cpath d='M80 92l6 6 10-12'/%3E%3Ccircle cx='16' cy='100' r='3'/%3E%3Cpath d='M48 100c4-4 8 4 12 0s8 4 12 0'/%3E%3Cpath d='M98 18l4 4m0-4l-4 4'/%3E%3C/svg%3E"); }
#pane.tg-mode[data-bg="night"], .chat.solo[data-bg="night"] { --glass: rgba(23, 33, 43, .72); --glass-border: rgba(255, 255, 255, .06); --glass-shadow: 0 2px 14px rgba(0, 0, 0, .3); }
#pane.tg-mode[data-bg="night"] .icon-btn:hover, #pane.tg-mode[data-bg="night"] .btn:hover, #pane.tg-mode[data-bg="night"] .btn.ghost:hover,
.chat.solo[data-bg="night"] .icon-btn:hover, .chat.solo[data-bg="night"] .btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
#pane.tg-mode[data-bg="night"] .comp-field, .chat.solo[data-bg="night"] .comp-field { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); }
#pane.tg-mode[data-bg="night"] .comp-field:focus-within, .chat.solo[data-bg="night"] .comp-field:focus-within { border-color: rgba(255, 255, 255, .22); box-shadow: none; }
#pane.tg-mode[data-bg="night"] .comp-field textarea, .chat.solo[data-bg="night"] .comp-field textarea { background: transparent; color: #e9eef3; }
#pane.tg-mode[data-bg="night"] .comp-field textarea::placeholder, .chat.solo[data-bg="night"] .comp-field textarea::placeholder { color: #8aa3b8; }
#pane.tg-mode[data-bg="night"] .comp-field .icon-btn, .chat.solo[data-bg="night"] .comp-field .icon-btn { color: #8aa3b8; }
#pane.tg-mode[data-bg="night"] .tgc-comp .btn.ghost { color: #b7c7d4; }
#pane.tg-mode[data-bg="night"] .tgc-comp.consult-mode { border-color: rgba(123, 104, 238, .35) !important; box-shadow: 0 0 0 1px rgba(123, 104, 238, .2), var(--glass-shadow) !important; }
.chat.solo[data-bg="night"] { color: #e9eef3; }
.chat.solo[data-bg="night"] .ch-head, .chat.solo[data-bg="night"] .ch-title small { color: #b7c7d4; }
.chat.solo[data-bg="night"] .ch-title b, .chat.solo[data-bg="night"] .msg-head b { color: #e9eef3; }
.chat.solo[data-bg="night"] .msg:hover { background: rgba(255, 255, 255, .04); }
.chat.solo[data-bg="night"] .pcard, .chat.solo[data-bg="night"] .file-row, .chat.solo[data-bg="night"] .react { background: rgba(255, 255, 255, .07); color: #e9eef3; border-color: rgba(255, 255, 255, .08); }
.chat.solo[data-bg="night"] .msg-tools { background: rgba(23, 33, 43, .9); border-color: rgba(255, 255, 255, .08); }

/* ---- ответ с цитатой в общем чате ---- */
.msg-quote { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 520px; margin: 2px 0 4px; padding: 4px 10px;
  border: 0; border-left: 3px solid var(--brand); border-radius: 4px 8px 8px 4px; background: rgba(58, 170, 140, .1); font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; color: inherit; }
.msg-quote b { color: var(--brand-ink); font-size: 12.5px; }
.msg-quote span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat.solo[data-bg="night"] .msg-quote { background: rgba(255, 255, 255, .06); }
.chat.solo[data-bg="night"] .msg-quote b { color: #7fd4b8; }
.chat.solo[data-bg="night"] .msg-quote span { color: #b7c7d4; }
.comp-reply { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px 8px; font-size: 13px; color: var(--brand-ink); }
.comp-reply[hidden] { display: none; }
.comp-reply .grow { min-width: 0; border-left: 3px solid var(--brand); padding-left: 8px; display: flex; flex-direction: column; }
.comp-reply .grow span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat.solo[data-bg="night"] .send-btn { background: rgba(255, 255, 255, .1); color: #e9eef3; }
.chat.solo[data-bg="night"] .msg-status { background: rgba(255, 255, 255, .08); color: #b7c7d4; border-color: transparent; }
.chat.solo[data-bg="night"] .msg-text { color: #e9eef3; }

/* ---- полосы прокрутки: тонкие, но заметные — тёмные полупрозрачные на светлом (и в полях ввода, и поверх узора),
   светлые на тёмном («Ночь», боковое меню). Белые поверх светлого поля не видно — так было в поле ввода ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(20, 30, 35, .38) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: rgba(20, 30, 35, .38); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(20, 30, 35, .55); }
.tgc[data-bg="night"] *, .chat.solo[data-bg="night"] * { scrollbar-color: rgba(255, 255, 255, .35) transparent; }
.tgc[data-bg="night"] ::-webkit-scrollbar-thumb, .chat.solo[data-bg="night"] ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .35); }
#sidebar, #sidebar * { scrollbar-color: rgba(255, 255, 255, .3) transparent; }
#sidebar ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .3); }
.tgc-consult *, .cs-list { scrollbar-color: rgba(123, 104, 238, .5) transparent; }

/* новое сообщение: строка жирная и чёрная, рядом — маленький серый счётчик (не красный), пока не прочитали */
.unread-n { background: rgba(30, 40, 45, .1); color: var(--text-2); font-weight: 600; font-size: 10.5px; min-width: 17px; height: 17px; margin: 0 2px 0 8px; }
.row.unread .nm, .mrow.unread .nm { font-weight: 700; color: var(--text); }
.row.unread .nm-msg, .mrow.unread .last-msg { color: var(--text); font-weight: 600; }
.row.unread .nm-time, .mrow.unread .mrow-time { color: var(--text); font-weight: 600; }
.mrow-side .unread-n { margin: 4px 0 0; }
/* «Чат» у чужого контакта (у них по умолчанию открывается карточка) — значок вместо значка карточки, того же размера */
/* цифра на «Ждут ответа» — белая на красном */
.chip .badge, .chip.on .badge { color: #fff !important; }
/* счётчик — в строке сообщения справа (как в Telegram): имени остаётся место */
.nm-msg-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nm-msg-row .nm-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-msg-row .unread-n { margin: 0; }

/* ---- общий чат пузырями: все по левому краю; подряд от одного — плотно, от другого — с отступом ---- */
.chat.solo .msg { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 1px 14px; }
.chat.solo .msg:not(.grouped) { padding-top: 12px; }
.chat.solo .msg:hover { background: none; }
.chat.solo .msg-gutter { align-items: flex-start; }
.chat.solo .msg-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.chat.solo .bubble-row { display: flex; align-items: flex-end; gap: 4px; max-width: 100%; }
.chat.solo .bubble { position: relative; min-width: 0; max-width: min(620px, 100%); padding: 6px 10px; border-radius: 14px 14px 14px 5px;
  background: var(--tg-in); color: var(--tg-text); box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.chat.solo .msg.grouped .bubble { border-top-left-radius: 5px; }
.chat.solo .msg.own .bubble { background: var(--tg-out); }
.chat.solo .msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; }
.chat.solo .msg-head b { color: var(--mc); font-size: 13.5px; font-weight: 600; filter: saturate(1.2) brightness(.85); }
.chat.solo .msg-head .msg-status { font-size: 11px; }
.chat.solo .msg-text { line-height: 1.4; }
/* время в углу пузыря: в конце текста, ничего не перекрывает */
.chat.solo .msg-meta { float: right; margin: 6px 0 -4px 10px; font-size: 11px; line-height: 1; color: var(--tg-meta); white-space: nowrap; user-select: none; }
.chat.solo .msg-meta-row { display: flex; justify-content: flex-end; margin-top: 2px; }
.chat.solo .msg-meta-row .msg-meta { float: none; margin: 0; }
.chat.solo .bubble .pcards, .chat.solo .bubble .m-files, .chat.solo .bubble .m-imgs { margin-top: 4px; }
.chat.solo .bubble .msg-quote { max-width: 100%; }
.chat.solo .reacts { margin-top: 3px; }
.chat.solo .msg.deleted .bubble { color: var(--tg-meta); }
/* действия — сразу справа от пузыря, при наведении */
.chat.solo .msg-tools { position: static; display: flex; flex: none; visibility: hidden; opacity: 0; transition: opacity .12s; margin-bottom: 2px; }
.chat.solo .msg:hover .msg-tools { visibility: visible; opacity: 1; }
.chat.solo .msg.flash .bubble { animation: bubbleflash 2s ease; }
@keyframes bubbleflash { 0%, 35% { box-shadow: 0 0 0 3px rgba(255, 200, 61, .9); } }
.chat.solo[data-bg="night"] .msg-head b { filter: saturate(1.1) brightness(1.25); }
@media (max-width: 760px) {
  .chat.solo .msg { padding: 1px 8px; grid-template-columns: 32px minmax(0, 1fr); gap: 6px; }
  .chat.solo .msg:not(.grouped) { padding-top: 10px; }
  .chat.solo .msg-tools { display: none; }
}

.chat.solo[data-bg="night"] .msg-head b { color: var(--mc); }

/* ---- поиск по чату: островок под шапкой ---- */
.tgc, .ch-main { position: relative; }
.chat-search { position: absolute; z-index: 9; top: 68px; left: 8px; right: 8px; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); max-height: 60%; }
.chat-search .cs-field { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; color: var(--text-3); }
.chat-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text); outline: none; padding: 6px 0; }
.chat-search .cs-results { overflow-y: auto; border-top: 1px solid rgba(0, 0, 0, .06); padding: 4px; }
.chat-search .cs-results[hidden] { display: none; }
.cs-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; background: none; border-radius: 12px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--text); }
.cs-item:hover { background: rgba(255, 255, 255, .6); }
.cs-who { font-size: 12.5px; font-weight: 600; display: flex; gap: 8px; }
.cs-who time { font-weight: 400; color: var(--text-3); }
.cs-text { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cs-note { padding: 10px 12px; color: var(--text-3); font-size: 13px; }
#pane.tg-mode[data-bg="night"] .chat-search, .chat.solo[data-bg="night"] .chat-search { color: #e9eef3; }
#pane.tg-mode[data-bg="night"] .chat-search input, .chat.solo[data-bg="night"] .chat-search input, #pane.tg-mode[data-bg="night"] .cs-item, .chat.solo[data-bg="night"] .cs-item { color: #e9eef3; }
#pane.tg-mode[data-bg="night"] .cs-text, .chat.solo[data-bg="night"] .cs-text { color: #b7c7d4; }
#pane.tg-mode[data-bg="night"] .cs-item:hover, .chat.solo[data-bg="night"] .cs-item:hover { background: rgba(255, 255, 255, .06); }
@media (max-width: 760px) { .chat-search { top: calc(64px + env(safe-area-inset-top)); left: 6px; right: 6px; } }
/* найденное сообщение в переписке — мигает */
.tgc-msg.flash .tgc-bubble { animation: bubbleflash 2s ease; }

/* «Ночь»: цитата при ответе — читаемая (светлый текст на мягкой подложке, голубая полоса как в тёмном Telegram) */
.tgc[data-bg="night"] .tgc-quote { color: #c9d6e2; background: rgba(106, 179, 243, .14); border-left-color: #6ab3f3; }
.tgc[data-bg="night"] .tgc-msg.out .tgc-quote { color: #dbe7f2; background: rgba(255, 255, 255, .1); border-left-color: #9fd0ff; }

/* ======================================================================
   Тема программы «Ночь» (профиль → «Фон программы»), отдельно от фона переписки.
   Цвета — из «Ночи» в чате; фон не однотонный — мягкий градиент; контраст текста ~10:1, вторичного ~5:1
   ====================================================================== */
body[data-theme="night"] {
  color-scheme: dark;
  --bg: #141c25; --surface: #1c2733; --surface-2: #232f3c; --page: #111922;
  --text: #e6edf3; --text-2: #a9b7c4; --text-3: #7f8f9e;
  --border: #2a3846; --border-strong: #384858;
  --brand-ink: #6fd3b3; --brand-tint: rgba(58, 170, 140, .16); --brand-tint-2: rgba(58, 170, 140, .3);
  --info-tint: #26323f; --danger-tint: rgba(220, 76, 76, .18); --warn-tint: rgba(214, 140, 40, .18); --warn: #e3a04a; --danger: #ef6b6b;
  --g1: rgba(43, 82, 120, .38); --g2: rgba(58, 170, 140, .14); --g3: rgba(70, 60, 140, .16);
  --glass: rgba(23, 33, 43, .72); --glass-border: rgba(255, 255, 255, .06); --glass-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 4px 16px rgba(0, 0, 0, .35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);
  background: var(--page); color: var(--text);
}
body[data-theme="night"] .main {
  background: radial-gradient(700px 360px at 8% -4%, var(--g1), transparent 70%), radial-gradient(760px 380px at 96% 6%, var(--g2), transparent 70%),
    radial-gradient(700px 360px at 50% 105%, var(--g3), transparent 70%), linear-gradient(160deg, #16212c, #111922 60%, #0e151c);
}
.sw.t-night { background: linear-gradient(135deg, #1f2b36, #17212b 60%, #2b5278); }
/* белые подложки — тёмные */
body[data-theme="night"][data-view="patients"] .list, body[data-theme="night"][data-view="patients"] .mlist,
body[data-theme="night"] .dash .dcard, body[data-theme="night"][data-view="profile"] .card { background: rgba(28, 39, 51, .92); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); }
body[data-theme="night"][data-view="patients"] .empty-state, body[data-theme="night"][data-view="inbox"] .empty-state { background: rgba(28, 39, 51, .8); }
body[data-theme="night"] .row:hover, body[data-theme="night"] .rem-row:hover, body[data-theme="night"] .in-card:hover, body[data-theme="night"] .msg:hover { background: rgba(255, 255, 255, .04); }
body[data-theme="night"] .row.picked { background: rgba(58, 170, 140, .14); }
body[data-theme="night"] .row.selected { background: rgba(58, 170, 140, .22); }
body[data-theme="night"] .f input.filled { background: rgba(58, 170, 140, .12); }
body[data-theme="night"] .note.pinned, body[data-theme="night"] .in-item.pinned .in-card { background: rgba(255, 209, 92, .08); border-color: rgba(255, 209, 92, .25); }
body[data-theme="night"] .comment.mine .bubble { background: rgba(58, 170, 140, .12); }
body[data-theme="night"] .mention.me, body[data-theme="night"] .mention.all { background: rgba(255, 200, 61, .2); color: #ffd77a; }
body[data-theme="night"] .day-sep span, body[data-theme="night"] .th-divider span { background: rgba(28, 39, 51, .85); }
body[data-theme="night"] .skeleton { background: linear-gradient(90deg, #1f2a36 25%, #273442 50%, #1f2a36 75%); background-size: 200% 100%; }
body[data-theme="night"] .tile-ico { background: rgba(255, 255, 255, .08); }
body[data-theme="night"] .tile::after { background: rgba(255, 255, 255, .04); }
body[data-theme="night"] .tile.t-amber { background: linear-gradient(135deg, rgba(255, 170, 60, .16), rgba(255, 170, 60, .08)); }
body[data-theme="night"] .tile.t-violet { background: linear-gradient(135deg, rgba(123, 104, 238, .2), rgba(123, 104, 238, .1)); }
body[data-theme="night"] .tile.alarm { background: linear-gradient(135deg, rgba(239, 107, 107, .2), rgba(239, 107, 107, .1)); }
body[data-theme="night"] .ch-timer, body[data-theme="night"] .ch-timer-chip { background: rgba(255, 170, 60, .14); color: #f0b36a; border-color: rgba(255, 170, 60, .25); }
body[data-theme="night"] .ch-timer .tm-ico { background: rgba(255, 255, 255, .08); }
/* чипы: выбранный — светлый на тёмном */
body[data-theme="night"] .chip { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
body[data-theme="night"] .chip.on { background: #e6edf3; border-color: #e6edf3; color: #141c25; }
body[data-theme="night"] .chip.on span:not(.badge) { color: rgba(20, 28, 37, .7); }
body[data-theme="night"] .btn { color: var(--text); }
body[data-theme="night"] .btn.primary { color: #fff; }
body[data-theme="night"] .card-btn { background: var(--surface-2); }
body[data-theme="night"] .unread-n { background: rgba(255, 255, 255, .12); color: #c9d6e2; }
body[data-theme="night"] input, body[data-theme="night"] textarea, body[data-theme="night"] select { color: var(--text); }
body[data-theme="night"] .pane-seg { background: rgba(255, 255, 255, .06); }
body[data-theme="night"] .pane-seg > span.on { background: rgba(255, 255, 255, .12); color: #fff; }
body[data-theme="night"] ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .25); }
body[data-theme="night"] * { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
body[data-theme="night"] .tgc-consult { background: rgba(23, 33, 43, .88); color: #e9eef3; }
body[data-theme="night"] .pr-list { background: rgba(28, 39, 51, .92); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); }
body[data-theme="night"] .tile.t-green { background: linear-gradient(135deg, rgba(58, 170, 140, .2), rgba(58, 170, 140, .1)); }
body[data-theme="night"] .tile.t-teal { background: linear-gradient(135deg, rgba(0, 150, 168, .22), rgba(0, 150, 168, .1)); }
body[data-theme="night"] .tile .tile-ico { filter: brightness(1.6); }
body[data-theme="night"] .ch-timer.done { background: linear-gradient(135deg, rgba(239, 107, 107, .22), rgba(239, 107, 107, .12)); border-color: rgba(239, 107, 107, .35); }
body[data-theme="night"] .comp-timer:hover { background: rgba(255, 170, 60, .16); color: #f0b36a; }
body[data-theme="night"] .msg.flash { animation: none; }
body[data-theme="night"] .pending, body[data-theme="night"] .pending * { border-color: rgba(214, 140, 40, .35); }
@media (max-width: 760px) { body[data-theme="night"] .tabbar { background: rgba(20, 28, 37, .96); } }

/* реакции в шторке на телефоне: общий стиль кнопок шторки (высота 52, отступы) делал смайлики приплющенными,
   а полный список — с прокруткой вбок и разъехавшимся последним рядом. Ровная сетка по 8 */
.sheet .react-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; justify-items: center; overflow-x: hidden; }
.sheet .react-row button { width: 40px; height: 40px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: 23px; line-height: 1; background: none; flex: none; }
.sheet .react-row button.on { background: var(--brand-tint); }
.sheet .react-row .x { display: none; }
.sheet .react-row.all .x { display: grid; }
.sheet .react-row .more { background: var(--surface-2); }
.sheet .react-row.all { max-height: 46vh; overflow-y: auto; background: none; }
.sheet .react-row.all .less { grid-column: 1 / -1; justify-self: stretch; width: auto; height: 34px; min-height: 0; display: flex; justify-content: flex-start;
  padding: 0 10px; font-size: 14px; border-radius: 10px; background: var(--surface-2); }
.sheet .react-row:not(.all) .less { display: none; }
/* убранный из общего чата: заглушка по центру */
.chat-banned .ch-main { display: grid; place-items: center; }
.ch-locked { max-width: 420px; background: var(--glass) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border); border-radius: 20px; padding: 28px 24px; }
.chat.solo[data-bg="night"] .ch-locked h3 { color: #e9eef3; }
.chat.solo[data-bg="night"] .ch-locked p { color: #b7c7d4; }
@media (max-width: 760px) { .ch-locked { margin: 0 16px; } }
/* «Архив» — всегда в шапке, и на телефоне (раньше — строкой, которую вытягивали и которая уезжала при прокрутке) */
@media (max-width: 760px) {
  .pl-arch-btn { padding: 0 10px; gap: 4px; flex: none; }
  .pl-arch-btn .lbl { display: none; }
}

/* «Вниз» в чатах — круглая стеклянная кнопка над полем ввода, появляется, если пролистали вверх */
.to-bottom { position: absolute; right: 16px; z-index: 7; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); color: var(--text-2); animation: fade .15s; }
.to-bottom[hidden] { display: none; }
.to-bottom:hover { color: var(--text); }
#pane[data-bg="night"] .to-bottom, .chat.solo[data-bg="night"] .to-bottom { color: #c9d6e2; }
/* строка сообщения — на всю ширину (нажатие рядом с пузырём — меню сообщения), сам пузырь — не шире 82% */
.tgc-msg { width: 100%; max-width: none; align-self: stretch; }
.tgc-msg > .tgc-bubble { max-width: 82%; min-width: 0; }
@media (max-width: 760px) {
  body[data-view="patients"] .topbar-right .search { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
  body[data-view="patients"] .topbar-right > .btn, body[data-view="patients"] .topbar-right > .icon-btn { flex: none; }
}
@media (max-width: 760px) { body[data-view="patients"] .topbar-right { min-width: 0; max-width: 100%; box-sizing: border-box; } }

/* Подсказка по Tab — над полем ввода */
.tgc-hint { display: flex; align-items: center; gap: 10px; margin: 0 4px 6px; padding: 5px 10px; border-radius: 10px;
  background: rgba(46, 156, 122, .08); font-size: 13px; cursor: pointer; min-width: 0; }
.tgc-hint[hidden] { display: none; }
.tgc-hint .h-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tgc-hint .h-was { color: var(--text-3); }
.tgc-hint .h-key { flex: none; color: var(--text-3); font-size: 12px; }
.tgc-hint kbd { font-size: 11px; font-weight: 600; line-height: 1; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); }
body[data-theme="night"] .tgc-hint { background: rgba(255, 255, 255, .06); }

/* Поле ввода: скрепка слева, смайлики (и ✨ на телефоне) справа — тексту больше места */
.comp-field [data-tg="attach"], .comp-field [data-action="comp-plus"] { order: -1; margin-left: 4px; }
.comp-field [data-tg="ai-menu"] { order: -2; margin-left: 4px; }
.comp-field:has([data-tg="attach"]) textarea, .comp-field:has([data-action="comp-plus"]) textarea { padding-left: 4px !important; }
/* набранный текст — темнее и чуть жирнее; предложенный ответ (placeholder) — светло-серый */
.tgc .comp-field textarea { color: #0d1719; font-weight: 500; }
.tgc .comp-field textarea.ready-ph::placeholder { color: #a3adb0; font-weight: 400; opacity: 1; }
body[data-theme="night"] .tgc .comp-field textarea, #pane.tg-mode[data-bg="night"] .tgc .comp-field textarea { color: #f2f6f9; }
body[data-theme="night"] .tgc .comp-field textarea.ready-ph::placeholder,
#pane.tg-mode[data-bg="night"] .tgc .comp-field textarea.ready-ph::placeholder { color: rgba(255, 255, 255, .38); }
/* строка «Предложенный ответ…» с крестиком справа */
.tgc-hint .h-ready { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.tgc-hint .h-x { flex: none; width: 26px; height: 26px; margin: -3px -6px -3px 0; color: var(--text-3); }
.tgc-hint .h-x:hover { color: var(--text); background: rgba(0, 0, 0, .06); }
.comp-field.multi [data-tg="ai-menu"] { position: absolute; left: 4px; top: 4px; margin: 0; }
@media (max-width: 760px) { .tgc-hint .h-ready { white-space: normal; line-height: 1.3; } .tgc-hint { align-items: center; } }
/* подсказка «@ — отправка заготовок» — в одну строку */
.tgc .comp-field textarea:not(.ready-ph)::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .tgc .comp-field textarea:not(.ready-ph)::placeholder { font-size: 14px; } }
/* «Черновик: …» в списке — как в Telegram, красным */
.draft-l { color: #d9534f; font-weight: 600; }
body[data-theme="night"] .draft-l { color: #ff7b72; }
/* «Ночь»: боковая панель — с лёгким бирюзовым оттенком и светлее фона, тонкая граница, чтобы не сливалась */
body[data-theme="night"] { --sidebar: #1a2c34; }
body[data-theme="night"] .sidebar { background: linear-gradient(180deg, #1c313a 0%, #18272f 100%); border-right: 1px solid rgba(111, 211, 179, .10);
  box-shadow: 1px 0 0 rgba(0, 0, 0, .25); }
/* наборы стикеров — тонкая полоса прокрутки видна, колесо листает вбок */
.pk-sets { scrollbar-width: thin; }
/* цитата в сообщении — нажать и перейти к нему */
.tgc-quote[data-tg="quote"] { cursor: pointer; }
.tgc-quote[data-tg="quote"]:hover { filter: brightness(1.06); }
/* реакции — цветными эмодзи, а не текстовыми значками */
.tgc-react { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", inherit; }
/* кнопки у пузыря на тёмном фоне переписки и в «Ночи» — тёмное стекло, а не белые кружки */
.tgc[data-bg="night"] .tgc-acts .icon-btn, body[data-theme="night"] .tgc .tgc-acts .icon-btn {
  background: rgba(28, 39, 51, .88); color: #b7c7d4; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.tgc[data-bg="night"] .tgc-acts .icon-btn:hover, body[data-theme="night"] .tgc .tgc-acts .icon-btn:hover { background: rgba(44, 58, 72, .95); color: #fff; }
/* ================= «Закладки» ================= */
/* сбоку справа, как закладки в книге; открылась карточка — едут вместе с ней по её левому краю */
/* отступы слева и сверху/снизу — чтобы тени и выезд при наведении не обрезались; сама полоса нажатия не ловит */
#bm-bar { position: fixed; right: 0; top: 68px; z-index: 31; display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; padding: 8px 0 12px 18px; pointer-events: none;
  transition: right .42s cubic-bezier(.22, 1, .36, 1); }
#bm-bar::-webkit-scrollbar { display: none; }
#bm-bar[hidden] { display: none; }
.bm-tab { pointer-events: auto; }
.bm-tab { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 38px; padding: 7px 0 7px 2px; cursor: pointer;
  border-radius: 14px 0 0 14px; background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 600;
  box-shadow: -2px 2px 8px rgba(20, 30, 40, .13); transition: transform .12s, background .15s; position: relative; user-select: none; }
.bm-tab:hover { transform: translateX(-3px); color: var(--text); }
.bm-name { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1; letter-spacing: .02em; }
/* открытая — мягкий оттенок фирменного цвета, полоса по краю и крестик */
/* открытая — прижата к краю, как остальные, но с мягкой градиентной заливкой */
.bm-tab.on, .bm-tab.on:hover { transform: none; color: var(--brand-ink, #1f7a5c);
  background: linear-gradient(180deg, #e9f7f1 0%, #cdeee1 100%); box-shadow: -2px 2px 10px rgba(20, 30, 40, .16); }
.bm-x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--text-3); margin-bottom: -2px; }
/* фото — под именем и повёрнуто вместе с ним */
.bm-av { display: grid; transform: rotate(-90deg); }
.bm-x:hover { background: rgba(0, 0, 0, .08); color: var(--text); }
.bm-tab.drop { outline: 2px dashed var(--brand); outline-offset: -2px; transform: translateX(-6px); }
.bm-tab .bm-n { order: -1; transform: rotate(-90deg); margin: 2px 0; }  /* непрочитанные — сверху, повёрнуты, как имя */
.bm-tab .bm-x { order: -2; }
.bm-saved { display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: #3fa9f5; color: #fff; }
.bm-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger, #e5484d); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-grid; place-items: center; }
#bm-btn { position: fixed; right: 0; top: 42%; z-index: 40; width: 34px; height: 46px; border: 0; border-radius: 12px 0 0 12px; background: var(--brand);
  color: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(20, 30, 40, .25); }
#bm-btn[hidden] { display: none; }
#bm-btn .bm-n { position: absolute; top: -6px; left: -6px; }
#bm-sheet { position: fixed; inset: 0; z-index: 70; background: var(--bg, var(--surface)); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s ease; padding-top: env(safe-area-inset-top); }
#bm-sheet.show { transform: none; }
.bm-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.bm-sheet-head b { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.bm-sheet-list { flex: 1; overflow-y: auto; padding: 6px 8px calc(16px + var(--sab, 0px)); }
.bm-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 0; background: none; border-radius: 12px; font: inherit;
  font-size: 15px; color: var(--text); text-align: left; cursor: pointer; }
.bm-item:active, .bm-item:hover { background: var(--surface-2); }
body[data-theme="night"] .bm-tab { background: #1f2d39; color: #e6edf3; box-shadow: -2px 2px 10px rgba(0, 0, 0, .4); }
body[data-theme="night"] .bm-tab.on { background: linear-gradient(180deg, #24443c, #1d3a33); color: #9fe3cb; box-shadow: -2px 2px 10px rgba(0, 0, 0, .4); }
.tgc-grip { cursor: grab; color: var(--text-3); }
.tgc-grip:active { cursor: grabbing; }
body[data-theme="night"] .bm-tab { background: #1f2d39; color: #e6edf3; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
body[data-theme="night"] .bm-tab.on { background: linear-gradient(180deg, #24443c, #1d3a33); color: #9fe3cb; box-shadow: -2px 2px 10px rgba(0, 0, 0, .4); }

/* ---- вторая колонка справа: чат из «Закладок» рядом с перепиской из «Контактов» ---- */
/* вторая колонка — той же ширины, что карточка; между ними — разделитель потолще обычной линии */
/* окна едут одним движением: колонка выезжает справа, карточка сдвигается влево, ленточки — вместе с ними (та же скорость и кривая) */
/* вторая колонка — левее столбца закладок и выплывает из него (раскрывается справа налево); карточка остаётся на месте */
.bm-dock { --dock-w: min(620px, 46vw); position: fixed; top: 0; right: 44px; bottom: 0; width: var(--dock-w); z-index: 19;
  display: flex; flex-direction: column; overflow: hidden; transition: right .42s cubic-bezier(.22, 1, .36, 1); }
/* выезжает содержимое — внутри своей колонки (overflow: hidden): поверх карточки ничего не проходит; к концу притормаживает */
.bm-dock > iframe, .bm-dock > .saved-ov { border-left: 1px solid var(--border); visibility: hidden; }
/* показываем, когда чат в рамке загрузил переписку (без мелькания скелетона), и выезжает он внутри своей колонки */
.bm-dock.shown > iframe, .bm-dock.shown > .saved-ov { visibility: visible; animation: bm-dock-in .48s cubic-bezier(.22, 1, .36, 1); }
.bm-dock + .bm-dock > iframe { border-right: 1px solid var(--border); }
/* выезжает из-под карточки и столбца закладок (они выше по слою), а не рисуется поверх */
@keyframes bm-dock-in { from { transform: translateX(100%); } }
/* столбец закладок между колонкой и карточкой — на нём ленточки */
/* столбец закладок между колонкой и карточкой — матовое стекло, сквозь которое просвечивает мягкий градиент */
#bm-spine { position: fixed; top: 0; bottom: 0; right: 0; width: 44px; z-index: 30; pointer-events: none;
  background: linear-gradient(180deg, rgba(139, 211, 188, .38), rgba(143, 183, 222, .30) 55%, rgba(187, 166, 230, .28)),
    rgba(255, 255, 255, .35);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-left: 1px solid rgba(255, 255, 255, .7); border-right: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 1px 0 0 rgba(20, 40, 50, .06), inset -1px 0 0 rgba(20, 40, 50, .06), -6px 0 18px rgba(20, 40, 50, .08), 6px 0 18px rgba(20, 40, 50, .08);
  transition: right .42s cubic-bezier(.22, 1, .36, 1); }
body[data-theme="night"] #bm-spine { background: linear-gradient(180deg, rgba(46, 156, 122, .25), rgba(58, 100, 150, .22) 55%, rgba(110, 90, 160, .2)),
    rgba(20, 30, 40, .55); border-color: rgba(255, 255, 255, .08); }
.pane { transition: transform .42s cubic-bezier(.22, 1, .36, 1), right .42s cubic-bezier(.22, 1, .36, 1); }
.bm-dock iframe { flex: 1; width: 100%; border: 0; display: block; background: var(--surface-2); }
body[data-theme="night"] .bm-dock { border-left-color: #2c3d4a; }
#pane.dragging.fwd::after { content: "Отпустите — сообщение перешлётся сюда"; }
/* в рамке — только чат на всю ширину */
html.embed .app, html.embed .tabbar, html.embed .fab, html.embed #bm-bar, html.embed #bm-btn { display: none !important; }
html.embed .pane { width: 100vw !important; right: 0 !important; transform: none !important; border: 0; box-shadow: none; }
@media (hover: hover) { html.embed .tgc .tgc-acts { display: flex; opacity: 0; } html.embed .tgc-msg:hover .tgc-acts { opacity: 1; } }  /* мышь — кнопки у пузыря и ручка, хоть колонка и узкая */
.tgc-fwd { font-size: 12.5px; font-weight: 600; color: var(--tg-accent, var(--brand-ink)); margin-bottom: 2px; }

/* «Избранное» — как обычный чат: шапка с фото, лента с узором, свои сообщения справа зелёными пузырями, новое внизу */
.bm-dock .saved-ov { position: absolute; inset: 0; z-index: auto; background: none; opacity: 1; }
.bm-dock .saved-panel { width: 100%; transform: none; box-shadow: none; }
.saved-panel.tgc { flex: none; position: absolute; min-height: 0; }  /* .tgc — position: relative, панель же прибита к краям */
.saved-panel .sv-head { padding: 8px 10px 8px 14px; gap: 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
.saved-panel .sv-title { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
.saved-panel .sv-title .muted { font-size: 12.5px; }
.saved-panel .sv-tools { padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.saved-panel .sv-tools[hidden] { display: none; }
.saved-panel.tgc .sv-list { flex-direction: column-reverse; gap: 6px; padding: 10px 12px 12px;
  background: var(--tg-pattern), var(--tg-bg); background-size: 120px 120px, cover; background-attachment: local, scroll; }
.saved-panel.tgc .sv-item { align-self: flex-end; max-width: 88%; min-width: 150px; gap: 4px; padding: 7px 10px 5px; border: 0;
  background: var(--tg-out); color: var(--tg-text); border-radius: 14px 14px 5px 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .13); }
.saved-panel.tgc .sv-meta { color: var(--tg-meta); }
.saved-panel.tgc .sv-fwd { color: var(--tg-accent); font-weight: 600; }
.saved-panel.tgc .sv-file { background: rgba(0, 0, 0, .05); }
.saved-panel.tgc .tgc-day { align-self: center; margin: 6px 0; }
.saved-panel.tgc .sv-empty { background: var(--tg-pill); color: #fff; border-radius: 14px; }
.saved-panel.tgc .pk-wait { align-self: center; background: var(--tg-pill); color: #fff; border-radius: 10px; padding: 3px 10px; font-size: 12px; }
.saved-panel .sv-comp { background: var(--surface); }
@media (hover: hover) {
  .saved-panel.tgc .sv-acts { opacity: 0; transition: opacity .15s; }
  .saved-panel.tgc .sv-item:hover .sv-acts { opacity: 1; }
}

/* статус собеседника под именем в шапке: «печатает…», «в сети», «был(а) в 14:30» */
.who-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.who-col .who-name { flex: none; }
.who-status { font-size: 12.5px; line-height: 1.2; color: var(--text-3); padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-status.on { color: var(--tg-accent, var(--brand)); }
#pane.tg-mode[data-bg="night"] .who-status { color: #8aa3b8; }
#pane.tg-mode[data-bg="night"] .who-status.on { color: #6ab3f3; }
.hid-badge { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: #3b4652; color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.hid-badge .icon { width: 11px; height: 11px; stroke-width: 2.2; }

/* «Избранное» — как переписка: узор на всё окно, шапка и поле ввода — стеклянные островки, поле — то же, что в чате */
.saved-panel.tgc { background: var(--tg-pattern), var(--tg-bg); background-size: 120px 120px, cover; }
.saved-panel.tgc .sv-list { background: none; }
.saved-panel.tgc .sv-head, .saved-panel.tgc .sv-tools, .saved-panel.tgc .sv-comp { margin: 8px 8px 0; border-radius: 20px; border: 1px solid var(--glass-border);
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: var(--glass-shadow); }
.saved-panel.tgc .sv-comp { margin: 0 8px 8px; padding: 8px 10px; border-top: 1px solid var(--glass-border); }
.saved-panel.tgc .sv-bar { margin: 0 8px; }
.saved-panel.tgc .comp-field, .saved-panel.tgc .comp-field textarea { background: rgba(255, 255, 255, .75); }
.saved-panel.tgc .comp-field textarea { padding: 9px 12px 9px 4px; max-height: 160px; }
.saved-panel.tgc[data-bg="night"] { --glass: rgba(23, 33, 43, .72); --glass-border: rgba(255, 255, 255, .06); --glass-shadow: 0 2px 14px rgba(0, 0, 0, .3); color: #e9eef3; }
.saved-panel.tgc[data-bg="night"] .comp-field, .saved-panel.tgc[data-bg="night"] .comp-field textarea { background: rgba(255, 255, 255, .08); color: #e9eef3; }
body[data-theme="night"] .saved-panel.tgc .comp-field, body[data-theme="night"] .saved-panel.tgc .comp-field textarea { background: rgba(255, 255, 255, .08); color: #e9eef3; }
.saved-panel .sv-comp .tgc-row { flex: 1; min-width: 0; }

/* предложенный ответ: этап разговора, который увидел ИИ */
.h-stage { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-ink);
  font-size: 11.5px; font-weight: 600; }
/* договорились о визите — над полем ввода */
.tgc-visit:not([hidden]) { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 8px 6px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--border); font-size: 13px; }
.tgc-visit .icon { color: var(--brand); flex: none; }
body[data-theme="night"] .tgc-visit:not([hidden]), #pane.tg-mode[data-bg="night"] .tgc-visit:not([hidden]) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1); }
/* этапы ИИ и макросы в профиле */
.stages-f .stage-seg { width: fit-content; margin: 4px 0 8px; }
.stages-f textarea, .macros-f textarea { width: 100%; }
.macro-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.macro-row { display: grid; grid-template-columns: 180px 1fr 32px; gap: 8px; align-items: start; }
.macro-row .with-at input { width: 100%; }
@media (max-width: 760px) { .macro-row { grid-template-columns: 1fr 32px; } .macro-row textarea { grid-column: 1 / -1; grid-row: 2; } }
.macro-suggest .macro-name { font-weight: 600; color: var(--brand-ink); min-width: 70px; flex: none; }
.macro-suggest button { display: flex; align-items: center; gap: 10px; }
/* для таблицы ресепшен */
.rcp-sec .section-head { display: flex; align-items: center; gap: 8px; }
.rcp-sec .section-head .btn { margin-left: auto; }
.rcp-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.rcp-grid .f span { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.rcp-grid input { width: 100%; }
.rcp-grid input[readonly] { background: var(--surface-2); }
@media (max-width: 760px) { .rcp-grid { grid-template-columns: 1fr 1fr; } .rcp-grid .f:first-child { grid-column: 1 / -1; } }
/* «Составить расписание» длиннее «Ответа ИИ» — кнопки ИИ плотнее, чтобы ряд не переносился
 */
.tgc-ai { gap: 0; flex-wrap: nowrap; overflow: hidden; }
.tgc-ai .btn.sm { padding-left: 5px; padding-right: 5px; gap: 4px; white-space: nowrap; }
.tgc-ai .tgc-lang-btn { padding-left: 2px !important; padding-right: 2px !important; }
/* «Переслано от/из» — нажать и перейти; GIF играет в ленте; карточка ссылки */
.tgc-fwd.go { cursor: pointer; }
.tgc-fwd.go:hover b { text-decoration: underline; }
.tgc-gif { display: block; max-width: 100%; max-height: 280px; border-radius: 10px; }
.tgc-link { display: flex; gap: 8px; margin-top: 6px; padding: 6px 8px; border-left: 3px solid var(--tg-accent, var(--brand)); border-radius: 6px;
  background: rgba(0, 0, 0, .04); color: inherit; text-decoration: none; max-width: 360px; }
.tgc-link img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; }
.tgc-link span { display: flex; flex-direction: column; min-width: 0; gap: 1px; font-size: 13px; line-height: 1.3; }
.tgc-link .tl-site { color: var(--tg-accent, var(--brand-ink)); font-size: 12.5px; }
.tgc-link small { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tgc[data-bg="night"] .tgc-link, body[data-theme="night"] .tgc-link { background: rgba(255, 255, 255, .06); }
.tgc[data-bg="night"] .tgc-link small { color: #b7c7d4; }

/* таблица ресепшен: строки записей, поля с копированием */
.rcp-sec .rcp-acts { margin-left: auto; display: flex; gap: 4px; }
.rcp-row { padding: 10px 0; border-top: 1px dashed var(--border); }
.rcp-row:first-of-type { border-top: 0; }
.rcp-row:not(.last) { opacity: .75; }
.rcp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rcp-grid .f > span:first-child { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.rcp-grid .f .rcp-in { display: flex; flex-direction: row; align-items: center; gap: 2px; }
.rcp-grid .f .rcp-in input { flex: 1; min-width: 0; width: auto; color: var(--text); }
.rcp-in .icon-btn { width: 28px; height: 28px; flex: none; color: var(--text-3); }
.rcp-grid .f.changed input { box-shadow: 0 0 0 2px var(--brand-tint-2, #bfe8d8); border-color: var(--brand); }
.rcp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.rcp-empty { margin: 4px 0 0; }
@media (max-width: 760px) { .rcp-grid { grid-template-columns: 1fr 1fr; } .rcp-sec .section-head { flex-wrap: wrap; } }
/* подсказка в пустом поле — в одну строку, что не влезло — многоточием (предложенный ответ серым — переносится, как был) */
#tgc-text:not(.ready-ph)::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* уведомления: крестик (клик мимо тоже закрывает) */
.toast .t-x { border: 0; background: none; color: inherit; opacity: .6; padding: 2px; margin-left: 2px; cursor: pointer; display: grid; place-items: center; }
.toast .t-x:hover { opacity: 1; }
/* таблица ресепшен: строка без правки — сплошным текстом */
.rcp-row:not(.editing) { display: flex; align-items: center; gap: 4px; }
.rcp-view { flex: 1; min-width: 0; padding: 4px 6px; border-radius: 8px; cursor: pointer; line-height: 1.4; }
.rcp-view:hover { background: var(--surface-2); }
.rcp-view b { font-weight: 600; margin-right: 4px; }
.rcp-view span { color: var(--text-2); }
.rcp-row.editing { padding: 10px; margin: 6px 0; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.rcp-foot { gap: 6px; }
.rcp-foot .grow { flex: 1; }
/* телефон: ленточки закладок выезжают из-за правого края; кнопка «Закладки» прилеплена к краю */
#bm-bar.mob { top: 70px; right: 0 !important; max-height: calc(100vh - 150px); z-index: 61; padding-left: 14px;
  animation: bm-mob-in .42s cubic-bezier(.22, 1, .36, 1); }
@keyframes bm-mob-in { from { transform: translateX(100%); } }
#bm-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(15, 22, 24, .28); animation: fade .2s; }
#bm-scrim[hidden] { display: none; }
#bm-btn { right: 0 !important; width: 30px; height: auto; padding: 10px 0 12px; border-radius: 12px 0 0 12px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; }
#bm-btn .bm-btn-l { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
#bm-btn .icon { transform: rotate(-90deg); }
.bm-dock > iframe, .bm-dock > .saved-ov { border-left: 1px solid var(--border) !important; }  /* линия едет вместе с содержимым */
.macro-row { grid-template-columns: 180px 1fr auto; }
.macro-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.macro-acts .btn.sm { padding: 3px 8px; white-space: nowrap; }
.macro-acts .busy .icon { animation: spin 1s linear infinite; }
@media (max-width: 760px) { .macro-row { grid-template-columns: 1fr auto; } .macro-acts { flex-direction: row; grid-column: 1 / -1; justify-content: flex-end; } }
.bm-dock.closing > iframe, .bm-dock.closing > .saved-ov { animation: bm-dock-out .28s cubic-bezier(.4, 0, .9, .6) forwards; }
@keyframes bm-dock-out { to { transform: translateX(100%); } }

/* заметка, которую ведёт ИИ по переписке */
.note-ai { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); }
.note-ai .ic { width: 12px; height: 12px; }
/* предложенные ответы: листать последние пять */
.tgc-hint .h-pg { flex: none; display: inline-flex; align-items: center; gap: 0; margin: -3px 4px -3px auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tgc-hint .h-pg .icon-btn { width: 24px; height: 24px; color: var(--text-3); }
.tgc-hint .h-pg .icon-btn:hover:not(:disabled) { color: var(--text); background: rgba(0, 0, 0, .06); }
.tgc-hint .h-pg .icon-btn:disabled { opacity: .35; }
body[data-theme="night"] .tgc-hint .h-pg .icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }

/* общий чат — закладкой: только чат, на всю рамку */
html.embed-chat .app { display: flex !important; }
html.embed-chat .sidebar, html.embed-chat .pane { display: none !important; }
html.embed-chat .main { width: 100vw; max-width: none; margin: 0; }
.bm-team { background: var(--brand); color: #fff; }
.ch-grip { cursor: grab; }
#chat.drop-fwd { outline: 2px dashed var(--brand); outline-offset: -6px; }
.tgc-hint .h-stage { flex: none; white-space: nowrap; }

/* ресепшен: чек-ап и источник — выпадающий список с поиском */
.rcp-dd { position: fixed; z-index: 400; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14); padding: 4px; }
.rcp-dd button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: 7px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.rcp-dd button:hover, .rcp-dd button.on { background: var(--brand-tint, #e6f5ef); }
.rcp-dd-empty { padding: 8px 10px; font-size: 13px; }
body[data-theme="night"] .rcp-dd { background: #22313a; border-color: rgba(255, 255, 255, .1); }
body[data-theme="night"] .rcp-dd button:hover, body[data-theme="night"] .rcp-dd button.on { background: rgba(255, 255, 255, .08); }
@media (max-width: 760px) { .rcp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- закладки не влезают по высоте: короче имена, потом без имён; дальше — листаются, затухание у края ---- */
#bm-bar { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); }
#bm-bar.tight { gap: 4px; }
#bm-bar.tight .bm-name { max-height: 5em; }
#bm-bar.tighter .bm-name { max-height: 3.2em; }
#bm-bar.tighter .bm-tab { padding: 5px 0 5px 2px; gap: 5px; }
#bm-bar.fade-down { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); }
#bm-bar.fade-up { -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(0deg, #000 calc(100% - 36px), transparent); }
#bm-bar.fade-up.fade-down { -webkit-mask-image: linear-gradient(180deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* ---- альбом: фото одного сообщения-альбома — сеткой в одном пузыре ---- */
.tgc-album { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: min(280px, 62vw); margin-bottom: 4px; border-radius: 10px; overflow: hidden; }
.tgc-album.n3 > :first-child { grid-column: 1 / -1; }
.tgc-album .tgc-photo-btn, .tgc-album .tgc-video-btn { display: block; min-width: 0; aspect-ratio: 1; overflow: hidden; }
.tgc-album .tgc-photo, .tgc-album video { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; margin: 0; border-radius: 0; }
.tgc-album.n3 > :first-child { aspect-ratio: 2 / 1; }

/* ---- выделение нескольких сообщений ---- */
.tgc-check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff;
  border: 2px solid rgba(120, 130, 140, .6); background: rgba(255, 255, 255, .7); align-self: center; }
.tgc-msg.out .tgc-check { margin-right: auto; order: 9; }
.tgc-msg.sel .tgc-check { background: var(--brand); border-color: var(--brand); }
.tgc.selecting .tgc-msg:not(.pending) { cursor: pointer; }
.tgc.selecting .tgc-msg:not(.pending) .tgc-bubble * { pointer-events: none; }
.tgc.selecting .tgc-msg .tgc-acts > :not(.tgc-grip) { display: none; }
.tgc.selecting .tgc-msg:not(.sel) .tgc-acts { visibility: hidden; }
.tgc.selecting .tgc-msg.sel .tgc-acts { opacity: 1; }
.tgc-msg.sel { background: rgba(46, 156, 122, .13); border-radius: 12px; }
.tgc-selbar { display: none; align-items: center; gap: 4px; min-height: 40px; }
.tgc.selecting .tgc-selbar { display: flex; }
.tgc.selecting .tgc-comp > :not(.tgc-selbar), .tgc.selecting #tgc-bar, .tgc.selecting #tgc-consult { display: none !important; }
.tgc-selbar .sel-n { font-size: 14px; white-space: nowrap; }
.tgc-selbar .btn.danger { color: var(--danger, #e5484d); }
@media (max-width: 760px) { .tgc-selbar .btn > span { display: none; } .tgc-selbar .btn { padding: 0 8px; } }
body[data-theme="night"] .tgc-check { background: rgba(30, 40, 50, .7); border-color: rgba(200, 210, 220, .5); }
body[data-theme="night"] .tgc-msg.sel { background: rgba(46, 156, 122, .22); }

/* ================= сайдбар: меню сверху, свои чаты (как в Telegram) — прокручиваются, «я» внизу ================= */
.app { grid-template-columns: 300px 1fr; }
.sidebar { overflow: hidden; padding-bottom: 10px; gap: 0; }
.side-top { flex: none; display: flex; flex-direction: column; gap: 2px; }
.side-head { display: flex; align-items: center; gap: 6px; margin: 12px 4px 4px; }
.side-title { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 6px; border-radius: 6px; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--sidebar-muted); }
.side-title:hover, .side-title.active { color: #fff; background: rgba(255, 255, 255, .07); }
.side-title .badge { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; line-height: 16px; letter-spacing: 0; }
.side-wait { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 0; border-radius: 11px; cursor: pointer;
  background: rgba(255, 180, 90, .18); color: #ffcf8f; font-size: 12px; font-weight: 600; }
.side-wait:hover { background: rgba(255, 180, 90, .28); }
.side-wait.on { background: #f0a24a; color: #1b2a2c; }
.side-chats { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.side-me { flex: none; padding-top: 8px; }
.side-empty { padding: 14px 10px; color: var(--sidebar-muted); font-size: 13px; text-align: center; }
.sc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none;
  color: var(--sidebar-text); text-align: left; cursor: pointer; }
.sc:hover { background: rgba(255, 255, 255, .06); }
.sc.on { background: rgba(58, 170, 140, .30); }
.sc-av { position: relative; flex: none; display: grid; }
.sc-dot { display: none; }
.sc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-top, .sc-bot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 4px; }
.sc-name .icon { flex: none; width: 12px; height: 12px; opacity: .6; }
.sc-time { flex: none; font-size: 11.5px; color: var(--sidebar-muted); display: flex; align-items: center; gap: 3px; }
.sc-tick { color: #6fd3b3; font-size: 11px; }
.sc-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--sidebar-muted); }
.sc-me { color: #cfe2dc; }
.sc-draft { color: #ff8a80; }
.sc-none { font-style: italic; opacity: .7; }
.sc.unread .sc-text { color: var(--sidebar-text); }
.sc-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #3aaa8c; color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-grid; place-items: center; }
.sc-wait { flex: none; color: #ffcf8f; display: grid; }
.sc-wait .icon { width: 13px; height: 13px; }
@media (max-width: 980px) {
  .app { grid-template-columns: 64px 1fr; }
  .side-head { justify-content: center; margin: 10px 0 4px; }
  .side-title { display: none; }
  .sc { justify-content: center; padding: 5px 0; }
  .sc-body { display: none; }
  .sc-dot { display: block; position: absolute; right: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #3aaa8c; box-shadow: 0 0 0 2px var(--sidebar); }
}
@media (max-width: 640px) { .app { grid-template-columns: 1fr; } }
.tgc-list.sel-drag, .tgc-list.sel-drag * { user-select: none; -webkit-user-select: none; cursor: default; }
/* над таблицей контактов больше нет ряда кнопок (менеджеры, метки) — отступ от шапки сам */
@media (min-width: 761px) { .toolbar.mob-only + .content { margin-top: 12px; } }

/* открыт чат (карточка или колонка закладок) — страница под ним как за матовым стеклом: акцент на чате; сайдбар — как был */
@media (min-width: 761px) {
  .main { position: relative; isolation: isolate; }
  .main::after { content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
    background: rgba(236, 242, 240, .32); -webkit-backdrop-filter: blur(7px) saturate(.85); backdrop-filter: blur(7px) saturate(.85);
    transition: opacity .42s cubic-bezier(.22, 1, .36, 1); }
  body.pane-open .main::after, body.bm-docked .main::after { opacity: 1; }
  body[data-theme="night"] .main::after { background: rgba(14, 22, 28, .38); }
}
html.embed .main::after, html.embed-chat .main::after { display: none; }

/* видео в ленте — превью-картинкой с кнопкой ▶; превью нет — тёмный прямоугольник */
.tgc-video-btn { min-width: 160px; min-height: 110px; }
.tgc-vthumb { display: block; max-width: 260px; max-height: 300px; min-width: 160px; min-height: 110px; object-fit: cover; pointer-events: none; color: transparent; }
@media (max-width: 760px) { .tgc-vthumb { max-width: 220px; } }

/* отправляемое сообщение: класс pending занят и рамкой «запросов коллег» — у сообщения её нет (была белая плашка на миг) */
.tgc-msg.pending { border: 0; background: none; padding: 0; margin-bottom: 0; border-radius: 0; opacity: 1; }
.tgc-msg.pending .tgc-bubble { opacity: .75; }
/* своё новое сообщение выходит из поля ввода: снизу, чуть меньше, быстро */
.tgc-msg.rise > .tgc-bubble { animation: tgc-rise .26s cubic-bezier(.22, 1, .36, 1) both; transform-origin: 100% 100%; }
@keyframes tgc-rise { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: .75; transform: none; } }

/* ---- сайдбар компактнее: меню и «я» занимают меньше, чатам — больше места ---- */
@media (min-width: 981px) {
  .side-top .brand { padding: 2px 8px 8px; }
  .side-top .brand img { width: 26px; height: 26px; }
  .side-top .brand-name { font-size: 15.5px; }
  .side-top .brand-sub { font-size: 11px; }
  .side-top .btn-create { margin: 0 4px 6px; padding: 5px 12px; font-size: 13.5px; }
  .side-top .btn-create .plus { width: 20px; height: 20px; }
  .side-top .demo-badge { margin: 0 6px 6px; padding: 4px 8px; font-size: 11.5px; }
  .side-top .nav-item { padding: 4px 10px; font-size: 13.5px; gap: 9px; min-height: 30px; }
  .side-top .nav-item .icon { width: 16px; height: 16px; }
}
.side-head { justify-content: space-between; margin: 8px 2px 4px; }
.side-wait { margin-left: auto; }
.side-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
  height: 24px; padding: 0 10px 0 6px; border-radius: 12px; font-size: 12.5px; font-weight: 600; }
.side-back:hover { background: rgba(255, 255, 255, .14); }
.side-back .icon { width: 14px; height: 14px; }
/* «я» — одной строкой */
.me-card.me-row { flex-direction: row; align-items: center; gap: 4px; padding: 4px; }
.me-row .me-main { flex: 1; min-width: 0; padding: 3px 4px; gap: 8px; }
.me-row .me-name { font-size: 13.5px; }
.me-row .me-hint { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-row .me-status { width: auto; flex: none; height: 32px; min-width: 32px; padding: 0 8px; justify-content: center; font-size: 15px; border-radius: 8px; }
.side-me { padding-top: 6px; }
/* строка чата — нажимается вся, повыше */
.sc { padding: 9px 10px; gap: 11px; border-radius: 12px; min-height: 62px; }
.sc-body { gap: 3px; }
/* края списка гаснут плавно, где он продолжается */
.side-chats.fade-down { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 44px), transparent); }
.side-chats.fade-up { -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(0deg, #000 calc(100% - 36px), transparent); }
.side-chats.fade-up.fade-down { -webkit-mask-image: linear-gradient(180deg, transparent, #000 36px, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 36px, #000 calc(100% - 44px), transparent); }
@media (max-width: 980px) {
  .sc { min-height: 0; padding: 6px 0; }
  .me-card.me-row { flex-direction: column; }
  .me-row .me-status { display: none; }
  .side-back { padding: 0 6px; font-size: 0; }
}

/* ---- сообщение пациента, пока программа открыта: плашка сверху посередине (вместо системного уведомления в углу) ---- */
#top-notes { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px;
  width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.top-note { pointer-events: auto; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--glass-border, rgba(255,255,255,.6));
  border-radius: 16px; background: var(--glass, rgba(255, 255, 255, .82)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(20, 30, 40, .18); color: var(--text); text-align: left; cursor: pointer; font: inherit;
  animation: tn-in .32s cubic-bezier(.22, 1, .36, 1); transition: opacity .28s, transform .28s; }
.top-note.out { opacity: 0; transform: translateY(-10px); }
@keyframes tn-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.tn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tn-body b { font-size: 13.5px; }
.tn-body span { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--text-3); }
.tn-x:hover { background: rgba(0, 0, 0, .07); color: var(--text); }
body[data-theme="night"] .top-note { background: rgba(28, 40, 50, .86); border-color: rgba(255, 255, 255, .08); color: #e6edf3; }

/* имя в шапке чата — одной строкой, не влезает — «…»; при правке видно целиком */
.who-name { display: block; -webkit-line-clamp: unset; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: normal; }
.who-name:focus-within { white-space: normal; text-overflow: clip; word-break: break-word; }
/* плашка о сообщении — снизу посередине, новая — ближе к краю; выезжает снизу */
#top-notes { top: auto; bottom: 18px; flex-direction: column-reverse; }
@keyframes tn-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.top-note.out { transform: translateY(12px); }
@media (max-width: 760px) { #top-notes { bottom: calc(var(--tabbar-h, 64px) + 12px + var(--sab, 0px)); } }

/* ---- все эмодзи по разделам (как в Telegram): кнопки разделов сверху, ниже — прокрутка ---- */
.emoji-grid.emo-all { display: flex; flex-direction: column; width: 340px; padding: 4px 6px 6px; }
.pk-emoji.emo-all { display: flex; flex-direction: column; max-height: none; overflow: visible; }
.emo-tabs { display: flex; gap: 2px; padding: 2px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.emo-tabs button { flex: 1; height: 30px; border: 0; background: none; border-radius: 8px; font-size: 17px; cursor: pointer; opacity: .75; }
.emo-tabs button:hover { background: var(--surface-2); opacity: 1; }
.emo-scroll { position: relative; max-height: 280px; overflow: hidden auto; overscroll-behavior: contain; }
.emo-h { position: sticky; top: 0; z-index: 1; padding: 6px 4px 3px; font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--surface); }
.emo-list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.emo-all .emo-list button { width: auto; height: 38px; border: 0; background: none; border-radius: 8px; font-size: 22px; cursor: pointer; padding: 0; }
.emo-all .emo-list button:hover { background: var(--surface-2); }
@media (max-width: 760px) { .emoji-grid.emo-all { width: auto; } .emo-scroll { max-height: 42vh; } }
body[data-theme="night"] .emo-h { background: var(--surface); }

/* звонок в ленте — как в Telegram */
.tgc-call { display: flex; align-items: center; gap: 14px; min-width: 200px; padding: 2px 2px 4px; }
.tgc-call .tc-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tgc-call b { font-weight: 600; }
.tgc-call .tc-sub { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.tgc-call .tc-arrow { color: #2e9c7a; font-weight: 700; }
.tgc-call.missed .tc-arrow { color: var(--danger, #e5484d); }
.tgc-call .tc-ic { color: var(--brand, #2e9c7a); display: grid; }
.tgc-call .tc-ic .icon { width: 22px; height: 22px; }
/* открыт чат — нажатие на размытую страницу только закрывает его (раньше открывало строку под стеклом) */
@media (min-width: 761px) { body.pane-open .main::after, body.bm-docked .main::after { pointer-events: auto; cursor: default; } }

/* ---- «Коллеги» — всплывающее окно у сайдбара (тёмное, как сайдбар; строки — как список чатов) ---- */
#coll-pop { position: fixed; z-index: 85; left: 310px; top: 120px; width: 340px; max-height: min(520px, calc(100vh - 24px)); display: flex; flex-direction: column;
  padding: 10px 8px 8px; border-radius: 16px; background: var(--sidebar); color: var(--sidebar-text); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 18px 50px rgba(10, 20, 25, .35); opacity: 0; transform: translateX(-8px) scale(.98); pointer-events: none;
  transition: opacity .2s, transform .26s cubic-bezier(.22, 1, .36, 1); }
#coll-pop.show { opacity: 1; transform: none; pointer-events: auto; }
.cp-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
.cp-head b { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 14.5px; }
.cp-head .icon-btn { color: var(--sidebar-muted); }
.cp-search { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; padding: 0 10px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--sidebar-muted); }
.cp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: 13.5px; }
.cp-search input::placeholder { color: var(--sidebar-muted); }
.cp-list { flex: 1; min-height: 60px; overflow-y: auto; margin: 0 -2px; }
@media (max-width: 980px) { #coll-pop { left: 74px; } }
@media (max-width: 760px) { #coll-pop { left: 8px !important; right: 8px; top: auto !important; bottom: calc(var(--tabbar-h, 64px) + 8px + var(--sab, 0px)); width: auto; max-height: 70vh; } }
/* карточка коллеги */
.coll-card .cc-name .nm-ed { display: inline-block; min-width: 60px; padding: 2px 6px; margin-left: -6px; border-radius: 6px; cursor: text; }
.coll-card .cc-name .nm-ed:hover { background: var(--surface-2); }
.coll-card .cc-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; color: var(--brand-ink, #1f7a5c); cursor: pointer; text-decoration: none; }
.coll-card .cc-link:hover { text-decoration: underline; }
/* меню поверх окна «Коллеги» (z-index 85) — иначе меню коллеги оказывалось под ним */
.menu { z-index: 95; }
.peek-ov { z-index: 88; }  /* «Подсмотреть сообщения» из окна «Коллеги» — поверх него */
/* «Переслать»: четыре кнопки — переносятся, на телефоне по две в ряд */
.fw-seg { flex-wrap: wrap; border-radius: 16px; }
@media (max-width: 760px) { .fw-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .fw-seg button { justify-content: center; } }

/* ================= приложение для Windows (desktop.js): окно у правого края, растёт влево ================= */
html.desktop .app { grid-template-columns: 300px 1fr; }
html.desktop .pane { width: var(--desk-col, 620px); }
html.desktop .bm-dock { --dock-w: var(--desk-col, 620px); }
html.desktop .main { padding-right: 44px; }  /* ленточки закладок у края — раздел не уходит под них */
html.desktop .toasts { left: 12px; right: auto; max-width: calc(100vw - 32px); }
/* узкая колонка (чат + закладка рядом): у переключателя «Переписка / Карточка» подпись только у выбранного — имени хватает места */
html.desk-tight #pane .pane-seg > span:not(.on) > span:last-child { display: none; }

/* ---- экран входа: не влезает по высоте (узкое окно приложения, ноутбук) — прокручивается, плитки меньше ---- */
.picker { overflow-y: auto; align-items: safe center; }
@media (max-height: 820px) {
  .picker-box .logo { margin-bottom: 20px; }
  .picker-box h1 { font-size: 24px; }
  .picker-box p { margin-bottom: 18px; }
  .picker-card { width: 136px; padding: 16px 10px 12px; gap: 9px; }
  .picker-card .av { --s: 60px !important; font-size: 22px; }
  .picker-card .nm { font-size: 15px; }
}
html.desktop .picker { place-items: start center; padding: 24px 14px 28px; }
html.desktop .picker-box .logo { margin-bottom: 18px; }
html.desktop .picker-box h1 { font-size: 22px; }
html.desktop .picker-box p { margin-bottom: 16px; font-size: 13.5px; }
html.desktop .picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
html.desktop .picker-card { width: auto; padding: 12px 8px 10px; gap: 7px; border-radius: 14px; }
html.desktop .picker-card .av { --s: 48px !important; font-size: 18px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand-tint-2); }
html.desktop .picker-card .nm { font-size: 14px; }
html.desktop .picker-card .pos { margin-top: -6px; font-size: 11.5px; }
html.desktop .login-panel { margin-top: 16px; }

/* ---- длинные ссылки, названия файлов, слова без пробелов — переносятся, переписка не уезжает вбок ---- */
.tgc-list { overflow-x: hidden; }
.tgc-msg { min-width: 0; }
.tgc-bubble { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.tgc-bubble * { max-width: 100%; }
.tgc-file span { min-width: 0; overflow-wrap: anywhere; }

/* приложение: прейскурант в колонке ~600px — список во всю ширину, подборка плавает справа внизу: свёрнута — сколько выбрано
   и сумма, нажали — раскрывается со всем, что в ней есть (как на телефоне) */
.pr-price { flex: none; }
html.desktop .pr-layout { display: block; margin: 0 14px; }
html.desktop .pr-list { padding-bottom: 90px; }
html.desktop .pr-aside { position: fixed; top: auto; left: auto; right: 58px; bottom: 14px; width: min(380px, calc(100% - 86px)); z-index: 30;
  box-shadow: 0 10px 34px rgba(20, 30, 40, .22); }
html.desktop .pr-aside-mob { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
html.desktop .pr-aside-mob span { flex: 1; }
html.desktop .pr-aside-mob .icon:last-child { transform: rotate(180deg); transition: transform .2s; }
html.desktop .pr-aside.sheet-open .pr-aside-mob .icon:last-child { transform: none; }
html.desktop .pr-aside:not(.sheet-open) .pr-aside-body { display: none; }
html.desktop .pr-aside-body { max-height: 65vh; border-top: 1px solid var(--border); }
/* приложение: страница в колонке справа (≈620px) — раскладка по ширине колонки, а не окна; вбок ничего не уезжает */
html.desktop, html.desktop body { overflow-x: hidden; }
html.desktop #main { container-type: inline-size; container-name: deskmain; }
@container deskmain (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-hello h1 { font-size: 26px; }
}
@container deskmain (max-width: 560px) { .focus-row { grid-template-columns: minmax(0, 1fr); } }
@container deskmain (max-width: 420px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---- ряд ИИ-кнопок над полем: не влезает — листается вбок (колесо, палец), края гаснут ---- */
.tgc-ai { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.tgc-ai::-webkit-scrollbar { display: none; }
.tgc-ai > * { flex: none; }
.tgc-ai.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.tgc-ai.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.tgc-ai.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

/* ---- «Рассчитать анализы»: окно подборки из переписки ---- */
.calc-dlg { width: min(640px, 100%); }
.calc-src { font-size: 13px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); white-space: pre-wrap; }
.calc-rows { display: flex; flex-direction: column; gap: 6px; }
.calc-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.calc-row.doubt { border-color: #f0c36b; background: #fff8e8; }
.calc-row.off { opacity: .65; border-style: dashed; }
.calc-main { flex: 1; min-width: 0; }
.calc-q { font-size: 12px; color: var(--text-3); }
.calc-row.doubt .calc-q b { color: #b07a10; font-weight: 600; }
.calc-name { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.calc-nav { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text-2); flex: none; }
.calc-nav span { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.calc-price { flex: none; white-space: nowrap; font-size: 14px; }
.calc-add { position: relative; margin: 10px 0 4px; }
.calc-add input { width: 100%; }
.calc-found { display: flex; flex-direction: column; margin-top: 4px; }
.calc-found button { display: flex; align-items: center; gap: 10px; justify-content: space-between; text-align: left; border: 0; background: none;
  padding: 7px 8px; border-radius: 8px; font: inherit; font-size: 13.5px; cursor: pointer; color: var(--text); }
.calc-found button:hover { background: var(--surface-2); }
.calc-found b { white-space: nowrap; }
.calc-totals { margin-top: 10px; }
body[data-theme="night"] .calc-row.doubt { background: rgba(240, 195, 107, .12); border-color: rgba(240, 195, 107, .5); }
body[data-theme="night"] .calc-row.doubt .calc-q b { color: #f0c36b; }
@media (max-width: 760px) { .calc-row { flex-wrap: wrap; } .calc-main { flex-basis: 100%; } .calc-main + * { margin-left: auto; } }

/* ---- ряд ИИ-кнопок: стрелки ‹ › по краям, когда есть что листать ---- */
.tgc-ai-wrap { position: relative; }
.tgc-ai-arr { position: absolute; top: 50%; z-index: 2; width: 24px; height: 24px; margin-top: -14px; border-radius: 50%; display: none; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); box-shadow: 0 1px 4px rgba(0,0,0,.12); cursor: pointer; padding: 0; }
.tgc-ai-arr:hover { color: var(--text); background: var(--surface-2); }
.tgc-ai-arr.l { left: -2px; } .tgc-ai-arr.r { right: -2px; }
.tgc-ai-arr.l .icon { transform: rotate(90deg); } .tgc-ai-arr.r .icon { transform: rotate(-90deg); }
.tgc-ai-wrap.can-l .tgc-ai-arr.l, .tgc-ai-wrap.can-r .tgc-ai-arr.r { display: grid; }
@media (max-width: 760px) { .tgc-ai-arr { display: none !important; } }

/* ---- редактор картинки перед отправкой (imgedit.js) ---- */
.ie-ov { position: fixed; inset: 0; z-index: 120; background: #15191c; color: #fff; display: flex; flex-direction: column; user-select: none; }
.ie-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ie-top .ie-title { flex: 1; text-align: center; font-weight: 600; font-size: 14px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-top .btn.ghost { color: #fff; }
.ie-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ie-cv { display: block; touch-action: none; cursor: crosshair; }
.ie-stage .lb-nav { z-index: 2; }
.ie-stage .lb-nav.next { right: 12px; }
.ie-crop-ok { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.ie-text { position: absolute; z-index: 3; min-width: 160px; font: 600 18px system-ui, sans-serif; background: rgba(0,0,0,.45); border: 1px dashed rgba(255,255,255,.7);
  border-radius: 6px; padding: 4px 6px; resize: none; outline: none; }
.ie-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 10px 12px calc(12px + var(--sab, 0px)); background: #1d2226; }
.ie-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.ie-group.off { opacity: .35; }
.ie-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 58px; padding: 6px 6px 4px; border: 0; border-radius: 10px;
  background: transparent; color: #cfd6da; font-size: 11px; cursor: pointer; }
.ie-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.ie-btn.on { background: rgba(52, 199, 89, .22); color: #fff; }
.ie-btn .icon { width: 20px; height: 20px; }
.ie-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: var(--c); cursor: pointer; padding: 0; }
.ie-color.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.ie-size { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.ie-size i { width: var(--d); height: var(--d); border-radius: 50%; background: #cfd6da; }
.ie-size.on { background: rgba(255,255,255,.14); }
.ie-size.on i { background: #fff; }
@media (max-width: 760px) {
  .ie-btn { min-width: 44px; font-size: 10px; padding: 5px 3px 3px; }
  .ie-tools { gap: 6px 10px; padding-left: 6px; padding-right: 6px; }
  .ie-stage .lb-nav:not([hidden]) { display: block; width: 36px; height: 36px; font-size: 22px; }  /* здесь пальцем рисуют — листаем стрелками */
}

/* iPhone с главного экрана, открыта клавиатура (app.js kbFit): окна — прямо над клавиатурой, без запаса под полоску «домой».
   Иначе iOS сам прокручивал страницу к полю на каждой строке, и поле прыгало */
@media (max-width: 760px) {
  html.kb-open { --sab: 0px; }
  html.kb-open .app, html.kb-open .main { height: calc(100dvh - var(--kb, 0px)); }
  html.kb-open .pane, html.kb-open .overlay, html.kb-open .sheet-wrap, html.kb-open .picker { bottom: var(--kb, 0px); }
  html.kb-open .modal { height: 100%; }
}

/* «Рассчитать анализы»: поиск не закрывается — отмечаем несколько, повторное нажатие убирает */
.calc-add .search { display: flex; width: 100%; }
.calc-found { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 4px; background: var(--surface); }
.calc-found[hidden] { display: none; }
.calc-found button { justify-content: flex-start; }
.calc-found button .grow { flex: 1; min-width: 0; }
.calc-found button.on { background: rgba(52, 168, 130, .1); }
.calc-found-foot { position: sticky; bottom: -4px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 6px 4px 8px; margin-top: 2px; background: var(--surface); border-top: 1px solid var(--border); font-size: 12.5px; }
.calc-none { padding: 8px; margin: 0; }
body[data-theme="night"] .calc-found button.on { background: rgba(82, 200, 160, .14); }
.calc-found .calc-found-foot .btn { flex: none; justify-content: center; padding: 5px 16px; background: var(--brand); color: #fff; font-weight: 600; }
.calc-found .calc-found-foot .btn:hover { background: var(--brand); filter: brightness(1.05); }