/* Вкладка «Экран ПК» — стили терминала xterm.js для узлов ccremote.
   Включает базовые правила xterm.js и контейнер #vnc-term. */

#vnc-term {
  position: absolute;
  inset: 0;
  background: #0c0d10;
  padding: 6px;
  box-sizing: border-box;
  display: none;
  overflow: hidden;
  z-index: 1;
}
#vnc-term.on {
  display: block;
}
/* В полноэкранном режиме бокс занимает весь экран, включая зону под часами и
   вырезом: без отступов первая строка вывода уезжала под статус-бар телефона
   (16.08.2026). --sa-* задаёт index.html, в Telegram — из safeAreaInset. */
body.vncfull #vnc-term {
  padding-top: calc(6px + var(--sa-top, 0px));
  padding-left: calc(6px + env(safe-area-inset-left));
  padding-right: calc(6px + env(safe-area-inset-right));
  padding-bottom: calc(6px + var(--sa-bottom, 0px));
}
#vnc-term .xterm {
  height: 100%;
  width: 100%;
}
#vnc-term .xterm-viewport {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Прокрутка истории пальцем. В разметке xterm холст (.xterm-screen) лежит
   ПОВЕРХ скроллируемого .xterm-viewport, и на десктопе это не мешает: колесо
   мыши xterm обрабатывает сам, через свой обработчик. На телефоне обработчика
   нет, палец попадает в холст, и листать историю нельзя вовсе (16.08.2026).
   Отдаём касания viewport'у — выделение мышью на десктопе при этом цело. */
@media (pointer: coarse) {
  #vnc-term .xterm-screen { pointer-events: none; }
}

/* Выход из терминала — сверху справа, поверх холста и вне зоны, которую
   занимает софт-клавиатура (нижняя панель #vnc-tools под ней недоступна). */
#vnc-termexit {
  position: absolute;
  right: calc(8px + env(safe-area-inset-right));
  top: calc(8px + var(--sa-top, 0px));
  z-index: 6;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(12, 13, 16, .82);
  color: var(--fg, #e0e4ec);
  font-size: 12px;
  backdrop-filter: blur(6px);
}
#vnc-termexit.on { display: inline-flex; }
#vnc-termexit:active { background: var(--accent); color: #fff; }

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    background-color: #0c0d10;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  font-family: monospace;
  user-select: text;
  white-space: pre;
}

.xterm .xterm-accessibility-tree > div {
  transform-origin: left;
  width: fit-content;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}