/* TTYD Mobile Keys — floating, draggable virtual keyboard */
/* Always rendered; users can hide with × and re-open with ⌨ FAB. */

#ttyd-mkeys {
  position: fixed;
  left: var(--mk-x, 8px);
  top: var(--mk-y, auto);
  bottom: var(--mk-bottom, calc(8px + env(safe-area-inset-bottom)));
  right: var(--mk-right, 8px);
  z-index: 999999;
  max-width: calc(100vw - 16px);
  background: rgba(26, 27, 38, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #414868;
  border-radius: 14px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(122,162,247,0.1);
  touch-action: none;
}

#ttyd-mkeys.dragging { opacity: 0.85; transition: none; cursor: grabbing; }
#ttyd-mkeys.collapsed .row:not(.sticky-row) { display: none; }
#ttyd-mkeys.collapsed .handle-row button.tgl::after { content: "▲"; }

#ttyd-mkeys .handle-row {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: grab;
  padding: 2px 4px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(122,162,247,0.12), rgba(187,154,247,0.08));
}
#ttyd-mkeys .handle-row:active { cursor: grabbing; }
#ttyd-mkeys .handle-grip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7aa2f7;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  padding-left: 6px;
}
#ttyd-mkeys .handle-grip::before {
  content: "⋮⋮";
  color: #565f89;
  letter-spacing: -2px;
  font-size: 14px;
}
#ttyd-mkeys .handle-row button {
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}
#ttyd-mkeys .handle-row button.close-big {
  background: #f7768e !important;
  color: #fff !important;
  border-color: #f7768e !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  min-width: 90px !important;
  min-height: 30px !important;
  letter-spacing: 0.5px;
}
#ttyd-mkeys .handle-row button.close-big:active {
  background: #d04155 !important;
}

#ttyd-mkeys .row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  /* Scroll discoverability — right-edge fade hint */
  -webkit-mask-image: linear-gradient(90deg, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, black 96%, transparent 100%);
  scroll-snap-type: x proximity;
}
#ttyd-mkeys .row > * { scroll-snap-align: start; }
#ttyd-mkeys .row::-webkit-scrollbar { display: none; }

#ttyd-mkeys button {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  background: #24283b;
  color: #c0caf5;
  border: 1px solid #414868;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  touch-action: manipulation;
  cursor: pointer;
  transition: background 0.05s, transform 0.05s;
  white-space: nowrap;
}
#ttyd-mkeys button:active,
#ttyd-mkeys button.pressed { background: #7aa2f7; color: #1a1b26; transform: scale(0.92); }
#ttyd-mkeys button.mod-on { background: #7aa2f7; color: #1a1b26; border-color: #7aa2f7; }
#ttyd-mkeys button.danger { color: #f7768e; }
#ttyd-mkeys button.warn { background: #f7768e; color: #1a1b26; border-color: #f7768e; }
#ttyd-mkeys button.accent { color: #9ece6a; }
#ttyd-mkeys button.wide { min-width: 56px; padding: 4px 14px; }
#ttyd-mkeys button.huge { min-width: 100px; padding: 4px 16px; flex: 1 1 auto; background: #292e42; }

/* TMUX helper row — distinct lime accent for tmux-prefix actions */
#ttyd-mkeys .tmux-row { background: rgba(163,230,53,.04); border-top: 1px dashed rgba(163,230,53,.18); border-bottom: 1px dashed rgba(163,230,53,.18); }
#ttyd-mkeys .row-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  color: #a3e635; padding: 0 6px; align-self: center;
  border: 1px solid #a3e635; border-radius: 3px; line-height: 22px;
  flex-shrink: 0;
}
#ttyd-mkeys .tmux-row button { font-size: 11px; font-weight: 600; letter-spacing: .04em; }

#ttyd-mkeys .arrows {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  flex: 1 1 auto;
}
/* Arrows get their own row — always visible on narrow viewports, no scroll */
#ttyd-mkeys .arrows-row {
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
#ttyd-mkeys .arrows-row .arrows {
  width: 100%;
}
#ttyd-mkeys .arrows-row .arrows button {
  min-height: 52px;
  font-size: 18px;
}

#ttyd-mkeys-toggle {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom));
  right: 10px;
  z-index: 1000000;
  width: 46px; height: 46px;
  border-radius: 23px;
  background: linear-gradient(135deg, #7aa2f7, #bb9af7);
  color: #fff;
  border: none;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0 4px 14px rgba(122,162,247,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  display: none;
  cursor: pointer;
}
#ttyd-mkeys-toggle:active { transform: scale(0.9); }

body.ttyd-mkeys-hidden #ttyd-mkeys { display: none; }
body.ttyd-mkeys-hidden #ttyd-mkeys-toggle { display: block; }

/* Narrow phones: default width larger, arrows bigger */
@media (max-width: 540px) {
  #ttyd-mkeys { right: 8px; left: 8px; max-width: none; }
  #ttyd-mkeys button { min-height: 48px; min-width: 48px; font-size: 14px; }
}

/* Keyboard focus ring — fixes zero focus-visible coverage (DEVIL F-3) */
#ttyd-mkeys button:focus-visible,
#ttyd-mkeys-toggle:focus-visible {
  outline: 2px solid #7aa2f7;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(122,162,247,0.25);
}

/* Respect prefers-reduced-motion on the keys overlay */
@media (prefers-reduced-motion: reduce) {
  #ttyd-mkeys, #ttyd-mkeys *, #ttyd-mkeys-toggle {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Full-screen terminal fix: no page scroll, terminal fills viewport ── */
html, body {
  height: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* ttyd wraps everything in #terminal-container / .xterm-container */
#terminal-container, .xterm-container {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
}

/* xterm.js internal DOM — must fill container, no page overflow */
.xterm {
  height: 100% !important;
  overflow: hidden !important;
}
.xterm-viewport {
  overflow-y: scroll !important;  /* internal scroll only — xterm owns it */
  overscroll-behavior: contain !important;
}
.xterm-screen {
  /* reserve space above keyboard bar so last line stays visible */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* When keyboard bar visible — push xterm up so last line not hidden */
body:not(.ttyd-mkeys-hidden) .xterm {
  padding-bottom: 130px !important;
}
body.ttyd-mkeys-hidden .xterm {
  padding-bottom: 64px !important;  /* just the FAB ⌨ button */
}