/* TUICommander — Global Styles */

/*
 * Platform-specific styling:
 * - macOS: titleBarStyle "overlay" - traffic lights overlay content, 78px left padding
 * - Windows/Linux: standard OS window chrome above content, no extra padding
 *
 * Platform classes applied to <html>: .platform-macos, .platform-windows, .platform-linux
 */

/* Bundled web fonts (woff2, no external requests) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-extralight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-extralight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fira-code-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fira-code-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hack';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/hack-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Hack';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/hack-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Cascadia Code';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('/fonts/cascadia-code.woff2') format('woff2');
}
@font-face {
  font-family: 'Iosevka';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/iosevka-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Iosevka';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/iosevka-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-code-pro-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-code-pro-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inconsolata-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inconsolata-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/monaspace-neon-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/monaspace-neon-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Commit Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/commit-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Commit Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/commit-mono-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geist-mono-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Symbols Nerd Font Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/symbols-nerd-font-mono.woff2') format('woff2');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}

:root {
  --bg-primary: #1e1e1e;
  --bg-secondary: #252526;
  --bg-tertiary: #2d2d30;
  --bg-highlight: #37373d;
  --fg-primary: #cccccc;
  --fg-secondary: #a0a0a0;
  --fg-muted: #9aa1a9;
  --accent: #59a8dd;
  --accent-hover: #7abde5;
  --activity: #59a8dd;  /* semantic: always blue, not overridden by themes */
  --border: #3e3e42;
  --success: #4ade80;
  --warning: #dcdcaa;
  --attention: #e8984c;
  --error: #ef4444;
  --merged: #a371f7;
  --unseen: #c084fc;  /* terminal completed while user wasn't viewing */
  --text-on-accent: #000000;
  --text-on-error: #000000;
  --text-on-success: #000000;

  /* Tab-type colors (shared between TabBar and PaneTree) */
  --tab-diff-rgb: 239, 68, 68;       /* red */
  --tab-edit-rgb: 122, 162, 247;     /* blue */
  --tab-md-rgb: 34, 197, 94;         /* green */
  --tab-panel-rgb: 167, 139, 250;    /* purple */
  --tab-html-rgb: 251, 191, 36;      /* amber */
  --tab-remote-rgb: 34, 211, 238;    /* cyan — remote/network */

  /* Border radius scale */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 12px;
  --radius-full: 50%;

  /* Font size scale */
  --font-3xs: 8px;
  --font-2xs: 10px;
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-base: 14px;
  --font-lg: 15px;
  --font-xl: 17px;
  --font-2xl: 20px;
  --font-3xl: 24px;

  /* Elevation */
  --shadow-popup: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-bottom-anchor: 0 -4px 20px rgba(0, 0, 0, 0.4);

  --sidebar-width: 300px;
  --toolbar-height: 32px;
  --tab-bar-height: 32px;
  --status-height: 32px;
  --font-mono: "JetBrains Mono", "Fira Code", "Hack", "Cascadia Code", "Source Code Pro", "DejaVu Sans Mono", monospace;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;

  /* ANSI terminal palette (dark theme, matches VS Code default dark+) */
  --ansi-black: #000000;
  --ansi-red: #cd3131;
  --ansi-green: #0dbc79;
  --ansi-yellow: #e5e510;
  --ansi-blue: #2472c8;
  --ansi-magenta: #bc3fbc;
  --ansi-cyan: #11a8cd;
  --ansi-white: #e5e5e5;
  --ansi-bright-black: #666666;
  --ansi-bright-red: #f14c4c;
  --ansi-bright-green: #23d18b;
  --ansi-bright-yellow: #f5f543;
  --ansi-bright-blue: #3b8eea;
  --ansi-bright-magenta: #d670d6;
  --ansi-bright-cyan: #29b8db;
  --ansi-bright-white: #ffffff;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-ui);
  font-size: var(--font-base);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* dvh adapts to iOS Safari dynamic toolbar; falls back gracefully */
  width: 100dvw;
}

#app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Scrollbar styling — thin, unobtrusive, unified across all panels */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-highlight);
  border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
}

/* Touch device: eliminate double-tap-to-activate caused by sticky :hover.
 * touch-action: manipulation disables double-tap-to-zoom, removing the
 * 300ms click delay that causes the browser to use first tap for :hover
 * and second tap for click. Desktop behavior is unaffected. */
@media (hover: none) {
  *, *::before, *::after {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Focus styles */
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduce compositor work for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Reusable CSS tooltip — WKWebView does NOT render native `title` tooltips, so any
 * hover hint in the desktop app must use this instead. Add `data-tooltip="text"` to
 * any element; the bubble shows above it on hover/focus, centered by default.
 * Modifiers:
 *   data-tooltip-pos="bottom"   flip below (near a panel's top edge)
 *   data-tooltip-align="right"  anchor bubble's right edge to the element (near a right edge)
 *   data-tooltip-align="left"   anchor bubble's left edge to the element
 * Pure CSS, no JS. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 10000;
  width: max-content;
  max-width: 240px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-highlight);
  color: var(--fg-primary);
  font-family: var(--font-ui);
  font-size: var(--font-2xs);
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

[data-tooltip][data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 6px);
}

[data-tooltip][data-tooltip-align="right"]::after {
  left: auto;
  right: 0;
  transform: none;
}

[data-tooltip][data-tooltip-align="left"]::after {
  left: 0;
  transform: none;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}

@media (hover: none) {
  /* Touch devices have no hover — never show the bubble. */
  [data-tooltip]:hover::after { opacity: 0; }
}
