/* 🖥 Дискорд-Торрент на весь экран (как Discord) + колонка каналов, которую тянут мышкой (sidebar.js).
   Только ПК (от 761 px): телефон и узкие окна — как было в talk.css. Главная (.tk-home) — не трогаем. */

/* ручка ширины: на телефоне её нет */
.tk-sizer { display:none; position:absolute; }

@media (min-width: 761px) {
  /* без полей и «карточки»: колонки впритык к краям окна, высота — от шапки и полосы заголовка приложения (--dk-tb, desktop.css) до низа */
  body.in-space .tk-wrap { max-width:none; margin:0; padding:0; }
  body.talk.in-space .bar-in { max-width:none; padding:6px 16px; }
  body.in-space .tk-app {
    --stW:312px;
    /* ширина колонки: 200…480, не больше 45 % окна и так, чтобы центру осталось ≥ 300 px (но 268 — всегда можно) */
    --sw:clamp(200px, var(--sideW, 268px), max(268px, min(480px, 45vw, 100vw - var(--stW) - 300px)));
    grid-template-columns:var(--sw) minmax(0, 1fr) var(--stW);
    height:calc(100dvh - var(--barH, 57px) - var(--dk-tb, 0px)); border:0; border-radius:0; box-shadow:none; }
  body.in-space .tk-app.no-stats { --stW:0px; grid-template-columns:var(--sw) minmax(0, 1fr); }

  /* ручка — тонкая полоса на правом крае колонки (и панели «я»), подсвечивается при наведении и перетаскивании */
  .tk-sizer { display:block; z-index:9; top:0; bottom:0; left:calc(var(--sw) - 4px); width:8px; cursor:col-resize; touch-action:none; outline:none; }
  .tk-sizer::after { content:""; position:absolute; top:0; bottom:0; left:3px; width:2px; background:transparent; transition:background-color .15s; }
  .tk-sizer:hover::after { background:color-mix(in srgb, var(--blue) 65%, transparent); transition-delay:.12s; }
  .tk-sizer.drag::after, .tk-sizer:focus-visible::after { background:var(--blue); transition-delay:0s; }
  .tk-sizer:focus-visible::after { left:2px; width:4px; border-radius:2px; }
  /* пока тянем — без выделения текста, курсор ↔ везде */
  body.tk-sizing, body.tk-sizing * { cursor:col-resize !important; -webkit-user-select:none !important; user-select:none !important; }

  /* узкая колонка (< 260 px, класс .tk-narrow ставит sidebar.js): подписи короче, кнопки панели «я» плотнее */
  .tk-app.tk-narrow .tk-side .tk-invite { padding:4px 7px; }
  .tk-app.tk-narrow .tk-side .tk-invite > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .tk-app.tk-narrow .tk-sec > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tk-app.tk-narrow .tk-me .tk-me-row { padding:8px 6px; gap:2px; }
  .tk-app.tk-narrow .tk-me-btns .tk-cb { width:30px; }
  .tk-app.tk-narrow .tk-vc { gap:8px; padding-left:10px; }
  .tk-app.tk-narrow .tk-vc-t b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* узкая колонка, мышь: значки владельца у канала — только при наведении/фокусе, иначе от названия ничего не остаётся */
@media (min-width: 761px) and (hover: hover) {
  .tk-app.tk-narrow .tk-ch-row:not(:hover):not(:focus-within) :is(.tk-own, .ci-btn) { display:none; }
}

@media (prefers-reduced-motion: reduce) { .tk-sizer::after { transition:none; } }