/* ============================================================================
   interact.css — реакции, меню сообщения, свайпы, зум (interact.js)
   ========================================================================== */

/* ---------- кнопка «Реакция» в .msg-hover ---------- */
.ix-mh-react svg{display:block}

/* ---------- панель быстрых реакций и выбор эмодзи ---------- */
.ix-pop{position:fixed;z-index:96;background:var(--panel-2);border:1px solid var(--border);
  box-shadow:var(--shadow);animation:ixPopIn .16s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes ixPopIn{from{opacity:0;transform:scale(.72)}}
.ix-bar{display:flex;align-items:center;gap:2px;padding:4px 6px;border-radius:26px}
.ix-bar-sep{width:1px;height:24px;background:var(--line);margin:0 4px;flex:none}
.ix-emo{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:22px;line-height:1;transition:transform .12s,background .12s;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",var(--font)}
.ix-emo:hover{background:var(--hover);transform:scale(1.14)}
.ix-emo:active{transform:scale(.9)}
.ix-emo.mine{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent)}
.ix-bar-act{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--accent)}
.ix-bar-act:hover{background:var(--hover)}
.ix-emo:focus-visible,.ix-bar-act:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.ix-picker{border-radius:16px;padding:8px 8px 6px;width:min(336px,calc(100vw - 16px))}
.ix-picker-head{font-size:12.5px;font-weight:600;color:var(--text-2);padding:2px 6px 6px}
.ix-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:2px;
  max-height:min(236px,calc(100dvh - 120px));overflow-y:auto;overscroll-behavior:contain}
.ix-picker .ix-emo{width:100%;height:38px;border-radius:10px;font-size:22px}
.ix-picker .ix-emo:hover{transform:scale(1.08)}

/* ---------- меню сообщения: шапка файла, ряд реакций, шапка ссылки ---------- */
.ctx-menu .ix-fh{display:flex;align-items:center;gap:11px;padding:6px 8px 6px 6px;max-width:300px}
.ctx-menu .ix-fh-tile{width:40px;height:40px;border-radius:12px;flex:none}
.ctx-menu .ix-fh-thumb{object-fit:cover;background:var(--chip);display:block}
.ctx-menu .ix-fh-body{min-width:0;flex:1}
.ctx-menu .ix-fh-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-menu .ix-fh-size{font-size:12px;color:var(--text-2);margin-top:1px;font-family:var(--font-mono)}
.ctx-menu .ix-rx-row{display:flex;gap:4px;padding:4px 4px 2px}
.ctx-menu .ix-rx-row .ix-emo{width:36px;height:36px;padding:0;font-size:20px;border-radius:50%;
  justify-content:center;background:var(--chip)}
.ctx-menu .ix-rx-row .ix-emo:hover{background:var(--hover)}
.ctx-menu .ix-rx-row .ix-emo.mine{background:var(--accent-soft)}
.ctx-menu .ix-rx-row .ix-emo-more{color:var(--accent)}
.ctx-menu .ix-link-head{padding:6px 12px 4px;font-size:12.5px;color:var(--text-2);max-width:280px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono)}

/* ---------- плашка ответа/правки над полем ввода ---------- */
/* «↓» — над полем ввода той высоты, что сейчас (плашка, многострочный текст);
   без переменной — прежние 88px */
.conv .scroll-bottom{bottom:calc(var(--ix-composer-h, 68px) + 20px)}
.reply-strip-thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;flex:none;
  background:var(--chip)}

/* ---------- свайп пузыря пальцем ---------- */
/* pan-y: вертикаль остаётся ленте, горизонталь — нашему жесту (без неё браузер
   отменил бы указатель на первом же сдвиге). Скроллеры внутри пузыря (таблица,
   код) — сами себе контейнеры и прокручиваются как раньше. */
#msgList .msg-row{touch-action:pan-y pinch-zoom}
#msgList .msg-row.ix-swiping{animation:none!important;will-change:transform}
#msgList .msg-row.ix-swiping .msg-hover{display:none}
.ix-swipe-hint{position:fixed;z-index:12;width:32px;height:32px;border-radius:50%;display:grid;
  place-items:center;background:var(--accent);color:var(--on-accent);opacity:0;pointer-events:none;
  transform:scale(.6);box-shadow:0 2px 10px var(--accent-glow)}
.ix-swipe-hint.ix-pop-tick{animation:ixTick .24s cubic-bezier(.3,1.6,.5,1)}
@keyframes ixTick{50%{filter:brightness(1.25);box-shadow:0 0 0 6px var(--accent-soft)}}

/* Телефон/планшет без мыши: hover-кнопок не бывает (их заменяют тап — реакции,
   долгое нажатие — меню, свайп — ответ/пересылка), а выделение текста долгим
   нажатием спорило бы с меню. Часть текста выделяется в шторке .ix-sel (двойной
   тап по пузырю или «Выделить текст» в меню), целиком — «Копировать текст».
   Панель расшифровки долгое нажатие не перехватывает (interact.js LP_NATIVE) —
   её текст выделяется как обычно. */
@media (hover:none) and (pointer:coarse){
  #msgList .msg-hover{display:none}
  #msgList .bubble{-webkit-user-select:none;user-select:none}
  #msgList .bubble input,#msgList .bubble textarea,#msgList .bubble .b-tx-panel{-webkit-user-select:text;user-select:text}
  #msgList .bubble .b-tx-panel{-webkit-touch-callout:default}
}

/* ---------- шторка выделения текста ---------- */
.ix-sel-back{position:fixed;inset:0;z-index:97;background:var(--scrim, rgba(0,0,0,.4));
  animation:ixFadeIn .16s both}
@keyframes ixFadeIn{from{opacity:0}}
.ix-sel{position:fixed;left:0;right:0;bottom:0;z-index:98;margin:0 auto;max-width:560px;
  display:flex;flex-direction:column;gap:10px;box-sizing:border-box;
  max-height:70vh;max-height:min(70dvh,600px);
  padding:12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-bottom:0;
  border-radius:18px 18px 0 0;box-shadow:var(--shadow);outline:none;
  animation:ixSheetIn .2s cubic-bezier(.2,.9,.3,1) both}
@keyframes ixSheetIn{from{transform:translateY(24px);opacity:0}}
/* кнопки — над текстом: маркеры выделения висят под строками и легли бы на них */
.ix-sel-head{display:flex;align-items:center;gap:8px;flex:none;
  -webkit-user-select:none;user-select:none}
.ix-sel-title{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-sel-chip{flex:none;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
.ix-sel-chip:hover{background:var(--hover)}
.ix-sel-chip.ix-sel-done{background:var(--accent);color:var(--on-accent)}
.ix-sel-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ix-sel-text{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.5;padding:2px 2px 4px;
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;cursor:text}
.ix-sel-text::selection{background:var(--accent-glow)}

/* ---------- просмотрщик: зум и панорама ---------- */
.lightbox.ix-zoomable{touch-action:none;overflow:hidden}
.lightbox.ix-zoomable .ix-zimg{transform-origin:50% 50%;will-change:transform;
  -webkit-user-drag:none;user-select:none;cursor:zoom-in}
.lightbox.ix-zoomed .ix-zimg{cursor:grab;border-radius:0}
.lightbox.ix-grabbing,.lightbox.ix-grabbing .ix-zimg{cursor:grabbing}
/* увеличенное фото закрывает весь экран — кнопкам нужна своя подложка,
   иначе светлый ✕ теряется на светлом снимке */
.lightbox.ix-zoomed .lightbox-close,.lightbox.ix-zoomed .lb-nav{background:rgba(0,0,0,.55);
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.lightbox.ix-zoomed .lightbox-close:hover,.lightbox.ix-zoomed .lb-nav:hover{background:rgba(0,0,0,.72)}
.lightbox.ix-zoomed .lb-bar{background:rgba(0,0,0,.7)}

/* ---------- боковая панель: копирование ---------- */
.dr-row .ix-copy{width:34px;height:34px;flex:none;color:var(--text-2);border-radius:50%}
.dr-row .ix-copy:hover{color:var(--accent);background:var(--accent-soft)}

@media (max-width:420px){
  .ix-emo,.ix-bar-act{width:36px;height:36px;font-size:20px}
  .ix-bar{padding:3px 4px}
  .ix-bar-sep{margin:0 2px}
}