/* ===== Theme Variables ===== */

/* --- Default: Catppuccin Mocha (dark purple) --- */
:root,
[data-theme="catppuccin-mocha"] {
  --bg: #1e1e2e;
  --bg-secondary: #252536;
  --bg-input: #1a1a2a;
  --border: #3a3a5a;
  --text: #cdd6f4;
  --text-muted: #6c7086;
  --accent: #89b4fa;
  --error: #f38ba8;
  --key-color: #89b4fa;
  --string-color: #a6e3a1;
  --number-color: #fab387;
  --boolean-color: #cba6f7;
  --null-color: #f38ba8;
  --brace-color: #9399b2;
  --toolbar-bg: #2a2a3e;
  --btn-bg: #3a3a5a;
  --btn-hover: #4a4a6a;
  --toggle-bg: #3a3a5a;
  --toggle-active: #89b4fa;
  --scrollbar-thumb: #3a3a5a;
  --scrollbar-track: transparent;
  --fold-hover: #33334d;
  --diff-added: #a6e3a1;
  --diff-removed: #f38ba8;
  --diff-modified: #f9e2af;
  --diff-added-bg: rgba(166,227,161,0.1);
  --diff-removed-bg: rgba(243,139,168,0.1);
  --diff-modified-bg: rgba(249,226,175,0.1);
}

/* --- GitHub Dark --- */
[data-theme="github-dark"] {
  --bg: #0d1117;
  --bg-secondary: #161b22;
  --bg-input: #0d1117;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #7d8590;
  --accent: #58a6ff;
  --error: #f85149;
  --key-color: #79c0ff;
  --string-color: #a5d6ff;
  --number-color: #79c0ff;
  --boolean-color: #ff7b72;
  --null-color: #f85149;
  --brace-color: #8b949e;
  --toolbar-bg: #161b22;
  --btn-bg: #21262d;
  --btn-hover: #30363d;
  --toggle-bg: #30363d;
  --toggle-active: #58a6ff;
  --scrollbar-thumb: #30363d;
  --scrollbar-track: transparent;
  --fold-hover: #1c2128;
  --diff-added: #3fb950;
  --diff-removed: #f85149;
  --diff-modified: #d29922;
  --diff-added-bg: rgba(63,185,80,0.12);
  --diff-removed-bg: rgba(248,81,73,0.12);
  --diff-modified-bg: rgba(210,153,34,0.12);
}

/* --- Nord --- */
[data-theme="nord"] {
  --bg: #2e3440;
  --bg-secondary: #3b4252;
  --bg-input: #2e3440;
  --border: #4c566a;
  --text: #eceff4;
  --text-muted: #81a1c1;
  --accent: #88c0d0;
  --error: #bf616a;
  --key-color: #81a1c1;
  --string-color: #a3be8c;
  --number-color: #b48ead;
  --boolean-color: #d08770;
  --null-color: #bf616a;
  --brace-color: #7b88a1;
  --toolbar-bg: #3b4252;
  --btn-bg: #434c5e;
  --btn-hover: #4c566a;
  --toggle-bg: #4c566a;
  --toggle-active: #88c0d0;
  --scrollbar-thumb: #4c566a;
  --scrollbar-track: transparent;
  --fold-hover: #434c5e;
  --diff-added: #a3be8c;
  --diff-removed: #bf616a;
  --diff-modified: #ebcb8b;
  --diff-added-bg: rgba(163,190,140,0.12);
  --diff-removed-bg: rgba(191,97,106,0.12);
  --diff-modified-bg: rgba(235,203,139,0.12);
}

/* --- Dracula --- */
[data-theme="dracula"] {
  --bg: #282a36;
  --bg-secondary: #2d2f3d;
  --bg-input: #21222c;
  --border: #44475a;
  --text: #f8f8f2;
  --text-muted: #6272a4;
  --accent: #bd93f9;
  --error: #ff5555;
  --key-color: #bd93f9;
  --string-color: #50fa7b;
  --number-color: #ffb86c;
  --boolean-color: #ff79c6;
  --null-color: #ff5555;
  --brace-color: #6272a4;
  --toolbar-bg: #2d2f3d;
  --btn-bg: #44475a;
  --btn-hover: #525575;
  --toggle-bg: #44475a;
  --toggle-active: #bd93f9;
  --scrollbar-thumb: #44475a;
  --scrollbar-track: transparent;
  --fold-hover: #383a4a;
  --diff-added: #50fa7b;
  --diff-removed: #ff5555;
  --diff-modified: #f1fa8c;
  --diff-added-bg: rgba(80,250,123,0.1);
  --diff-removed-bg: rgba(255,85,85,0.1);
  --diff-modified-bg: rgba(241,250,140,0.1);
}

/* --- Solarized Dark --- */
[data-theme="solarized-dark"] {
  --bg: #002b36;
  --bg-secondary: #073642;
  --bg-input: #002b36;
  --border: #2a4a52;
  --text: #93a1a1;
  --text-muted: #657b83;
  --accent: #268bd2;
  --error: #dc322f;
  --key-color: #268bd2;
  --string-color: #2aa198;
  --number-color: #d33682;
  --boolean-color: #cb4b16;
  --null-color: #dc322f;
  --brace-color: #586e75;
  --toolbar-bg: #073642;
  --btn-bg: #0a4050;
  --btn-hover: #14546a;
  --toggle-bg: #2a4a52;
  --toggle-active: #268bd2;
  --scrollbar-thumb: #2a4a52;
  --scrollbar-track: transparent;
  --fold-hover: #0d3d4d;
  --diff-added: #2aa198;
  --diff-removed: #dc322f;
  --diff-modified: #b58900;
  --diff-added-bg: rgba(42,161,152,0.12);
  --diff-removed-bg: rgba(220,50,47,0.12);
  --diff-modified-bg: rgba(181,137,0,0.12);
}

/* --- One Dark (Atom) --- */
[data-theme="one-dark"] {
  --bg: #282c34;
  --bg-secondary: #2c313a;
  --bg-input: #23272e;
  --border: #3e4451;
  --text: #abb2bf;
  --text-muted: #636d83;
  --accent: #61afef;
  --error: #e06c75;
  --key-color: #61afef;
  --string-color: #98c379;
  --number-color: #d19a66;
  --boolean-color: #c678dd;
  --null-color: #e06c75;
  --brace-color: #636d83;
  --toolbar-bg: #2c313a;
  --btn-bg: #3e4451;
  --btn-hover: #4b5263;
  --toggle-bg: #3e4451;
  --toggle-active: #61afef;
  --scrollbar-thumb: #3e4451;
  --scrollbar-track: transparent;
  --fold-hover: #333842;
  --diff-added: #98c379;
  --diff-removed: #e06c75;
  --diff-modified: #e5c07b;
  --diff-added-bg: rgba(152,195,121,0.1);
  --diff-removed-bg: rgba(224,108,117,0.1);
  --diff-modified-bg: rgba(229,192,123,0.1);
}

/* --- Light: Catppuccin Latte --- */
[data-theme="catppuccin-latte"] {
  --bg: #eff1f5;
  --bg-secondary: #e6e9ef;
  --bg-input: #ffffff;
  --border: #ccd0da;
  --text: #4c4f69;
  --text-muted: #8c8fa1;
  --accent: #1e66f5;
  --error: #d20f39;
  --key-color: #1e66f5;
  --string-color: #40a02b;
  --number-color: #fe640b;
  --boolean-color: #8839ef;
  --null-color: #d20f39;
  --brace-color: #9ca0b0;
  --toolbar-bg: #e6e9ef;
  --btn-bg: #dce0e8;
  --btn-hover: #ccd0da;
  --toggle-bg: #ccd0da;
  --toggle-active: #1e66f5;
  --scrollbar-thumb: #bcc0cc;
  --scrollbar-track: transparent;
  --fold-hover: #dce0e8;
  --diff-added: #40a02b;
  --diff-removed: #d20f39;
  --diff-modified: #df8e1d;
  --diff-added-bg: rgba(64,160,43,0.1);
  --diff-removed-bg: rgba(210,15,57,0.1);
  --diff-modified-bg: rgba(223,142,29,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Tab Bar ===== */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--toolbar-bg);
  border-bottom: 2px solid var(--border);
  flex-shrink: 0;
}

.tab-bar-tabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
}

.tab-bar .app-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  padding: 0 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 12px 20px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tab-btn:hover {
  color: var(--text);
  background: rgba(137,180,250,0.05);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ===== Tab Content ===== */
.tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.tab-content.active {
  display: flex;
}

/* ===== Toolbar ===== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  min-height: 53px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.toolbar h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-right: auto;
}

.toolbar button {
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.toolbar button:hover { background: var(--btn-hover); }

.toggle-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle .slider {
  position: absolute;
  inset: 0;
  background: var(--toggle-bg);
  border-radius: 10px;
  transition: background 0.2s;
}

.toggle .slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 3px; top: 3px;
  background: var(--text);
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle input:checked + .slider { background: var(--toggle-active); }
.toggle input:checked + .slider::before { transform: translateX(16px); }

/* ===== Main panels ===== */
.main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.panel {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  overflow: hidden;
}

.panel-header {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.input-panel { flex: 1; }
.output-panel { flex: 1; }

#jsonInput {
  flex: 1;
  width: 100%;
  padding: 16px;
  background: var(--bg-input);
  color: var(--text);
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
}

#jsonInput::placeholder { color: var(--text-muted); }

#jsonOutput {
  flex: 1;
  padding: 16px;
  overflow: auto;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.6;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--btn-hover); }

/* ===== Resizer ===== */
.resizer {
  width: 5px;
  cursor: col-resize;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.15s;
}
.resizer:hover, .resizer.active { background: var(--accent); }

/* ===== Collapsible JSON Tree ===== */
.json-tree {
  white-space: pre;
  word-wrap: normal;
}

.json-key { color: var(--key-color); }
.json-string { color: var(--string-color); }
.json-number { color: var(--number-color); }
.json-boolean { color: var(--boolean-color); }
.json-null { color: var(--null-color); }
.json-brace { color: var(--brace-color); }

.json-collapsible { display: inline; }

.json-toggle {
  display: inline-block;
  width: 14px; height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 2px;
  user-select: none;
  transition: background 0.1s, color 0.1s;
}

.json-toggle:hover {
  background: var(--fold-hover);
  color: var(--accent);
}

.json-content { display: inline; }

.json-collapsible.collapsed > .json-content { display: none; }
.json-collapsible.collapsed > .json-ellipsis { display: inline; }

.json-ellipsis {
  display: none;
  color: var(--text-muted);
  cursor: pointer;
  font-style: italic;
}

.json-ellipsis:hover { color: var(--accent); }

.json-item-count {
  color: var(--text-muted);
  font-size: 11px;
  font-style: italic;
}

.json-line { display: inline; }

/* ===== Error ===== */
.error-msg {
  color: var(--error);
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.error-msg .error-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}

/* ===== Placeholder ===== */
.placeholder {
  color: var(--text-muted);
  font-style: italic;
  padding: 16px;
}

/* ===== Tool Textarea (Base64, URL, Diff inputs) ===== */
.tool-textarea {
  flex: 1;
  width: 100%;
  padding: 16px;
  background: var(--bg-input);
  color: var(--text);
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
}

.tool-textarea::placeholder { color: var(--text-muted); }

.tool-textarea[readonly] {
  background: var(--bg);
  cursor: default;
}

.tool-textarea.error-border {
  box-shadow: inset 0 0 0 2px var(--error);
}

/* ===== Tool Row (Timestamp form rows) ===== */
.tool-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: none;
  flex-wrap: nowrap;
  width: 900px;
  max-width: 90%;
}

.tool-row label {
  font-size: 22px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: auto;
}

.tool-row input[type="text"] {
  flex: 0 1 360px;
  min-width: 300px;
  padding: 8px 16px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 22px;
  outline: none;
  transition: border-color 0.15s;
}

.tool-row input[type="text"]:focus {
  border-color: var(--accent);
}

.tool-row input[type="text"].error-border {
  border-color: var(--error);
}

.tool-row .result-text {
  flex: 0 1 360px;
  min-width: 300px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 22px;
  color: var(--text);
  word-break: break-all;
}

.tool-row button {
  background: var(--btn-bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  white-space: nowrap;
}

.tool-row button:hover { background: var(--btn-hover); }

/* ===== Timestamp section wrapper ===== */
#tab-timestamp .tool-row {
  border-bottom: none;
  border-top: none;
  width: auto;
  max-width: none;
  margin: 6px 0;
}


/* ===== Current timestamp display ===== */
.timestamp-live {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.timestamp-section {
  flex: 1;
  overflow: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 80px;
  gap: 24px;
}

/* ===== JSON Diff ===== */
.diff-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.diff-inputs {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.diff-inputs .panel {
  flex: 1;
}

.diff-output-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 2px solid var(--border);
}

.diff-stats {
  padding: 8px 16px;
  font-size: 13px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}

.diff-stats .stat-added { color: var(--diff-added); }
.diff-stats .stat-removed { color: var(--diff-removed); }
.diff-stats .stat-modified { color: var(--diff-modified); }

.diff-result {
  flex: 1;
  overflow: auto;
  padding: 16px;
  font-size: 13px;
  line-height: 1.8;
}

.diff-entry {
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 2px;
}

.diff-entry.diff-added {
  background: var(--diff-added-bg);
  color: var(--diff-added);
}

.diff-entry.diff-removed {
  background: var(--diff-removed-bg);
  color: var(--diff-removed);
}

.diff-entry.diff-modified {
  background: var(--diff-modified-bg);
  color: var(--diff-modified);
}

.diff-path {
  font-weight: 600;
  margin-right: 8px;
}

.diff-value {
  opacity: 0.85;
}

.diff-arrow {
  margin: 0 6px;
  color: var(--text-muted);
}

/* ===== Theme Switcher ===== */
.theme-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  flex-shrink: 0;
  height: 100%;
}

.theme-switcher .theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.theme-switcher .theme-dot:hover {
  transform: scale(1.3);
  border-color: var(--text);
}

.theme-switcher .theme-dot.active {
  border-color: var(--text);
  transform: scale(1.2);
}