/* Code Editor — chrome styles. The editor surface itself is Monaco's
   (vs-dark / vs themes); this file styles the topbar, tabs, status bar
   and overlays around it. Uniformity rule (standing): within any row,
   every element shares one height, one corner radius, one font size,
   one gap rhythm. */

:root,
[data-theme="dark"] {
  --bg: #1e1e1e;
  --chrome: #252526;
  --chrome2: #2d2d2d;
  --border: rgba(255, 255, 255, 0.09);
  --ink: #cccccc;
  --ink-dim: #8b8b8b;
  --ink-strong: #ffffff;
  --btn-bg: #3c3c3c;
  --btn-hover: #505050;
  --accent: #007acc;
  --accent-hover: #0062a3;
  --tab-bg: #2d2d2d;
  --tab-active-bg: #1e1e1e;
  --status-bg: #007acc;
  --status-ink: #ffffff;
  --dirty: #e8a33d;
  --menu-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  --overlay-bg: rgba(30, 30, 30, 0.97);
}

[data-theme="light"] {
  --bg: #ffffff;
  --chrome: #f3f3f3;
  --chrome2: #ececec;
  --border: rgba(0, 0, 0, 0.1);
  --ink: #333333;
  --ink-dim: #6b6b6b;
  --ink-strong: #000000;
  --btn-bg: #e5e5e5;
  --btn-hover: #d4d4d4;
  --accent: #007acc;
  --accent-hover: #0062a3;
  --tab-bg: #ececec;
  --tab-active-bg: #ffffff;
  --status-bg: #007acc;
  --status-ink: #ffffff;
  --dirty: #c77f0a;
  --menu-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  --overlay-bg: rgba(255, 255, 255, 0.97);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, select, input { font: inherit; }

button:focus-visible, select:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Topbar — one 34px rhythm for every control in the row.              */
/* ------------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 10px;
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  flex: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  text-decoration: none;
  color: var(--ink-strong);
  flex: none;
}

.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.top-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.btn {
  height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover { background: var(--btn-hover); color: var(--ink-strong); }
.btn:active { transform: translateY(0.5px); }

.btn.primary {
  background: var(--accent);
  color: #ffffff;
}
.btn.primary:hover { background: var(--accent-hover); }

.btn.toggle.on {
  background: var(--accent);
  color: #ffffff;
}

.sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 2px;
  flex: none;
}

.menu-wrap { position: relative; }

/* The More overflow menu exists only on narrow screens (see the
   max-width: 640px block below); hidden on desktop. */
.more-wrap { display: none; }

.menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 230px;
  padding: 6px;
  background: var(--chrome2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--menu-shadow);
}

/* Right-aligned variant (More menu sits at the row's right end). */
.menu.right { left: auto; right: 0; }

.menu-item {
  display: block;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-item:hover { background: var(--btn-hover); color: var(--ink-strong); }

/* ------------------------------------------------------------------ */
/* Tab strip — 36px row; horizontal scroll with a fade affordance so a */
/* row is never sliced mid-label with no indication.                   */
/* ------------------------------------------------------------------ */

.tabstrip {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 36px;
  flex: none;
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent 100%);
}
.tabstrip::-webkit-scrollbar { display: none; }

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px 0 12px;
  background: var(--tab-bg);
  border-right: 1px solid var(--border);
  color: var(--ink-dim);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  flex: none;
  max-width: 180px;
}
.tab:hover { color: var(--ink); }
.tab.active {
  background: var(--tab-active-bg);
  color: var(--ink-strong);
  border-top: 1px solid var(--accent);
}

.tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 132px;
}

.tab-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dirty);
  flex: none;
}
.tab.dirty .tab-dot { display: block; }

.tab-close {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.tab-close:hover { background: var(--btn-hover); color: var(--ink-strong); }

.tab-rename {
  height: 24px;
  width: 120px;
  padding: 0 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink-strong);
  font-size: 13px;
}

.new-tab-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.new-tab-btn:hover { background: var(--tab-bg); color: var(--ink-strong); }

/* ------------------------------------------------------------------ */
/* Editor area + overlays                                              */
/* ------------------------------------------------------------------ */

.editor-wrap {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  background: var(--bg);
}

.editor-el {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--overlay-bg);
}

/* [hidden] must win over the display:flex above, or a hidden overlay
   still intercepts pointer events (caught by Playwright QA). */
.overlay[hidden],
.drop-veil[hidden] {
  display: none;
}

.overlay-card {
  max-width: 440px;
  width: 100%;
  text-align: center;
  padding: 28px 24px;
  background: var(--chrome);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.overlay-card h2 {
  margin: 0 0 10px;
  color: var(--ink-strong);
  font-size: 20px;
}
.overlay-card p {
  margin: 0 0 18px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
}
.overlay-card p.error-msg { color: var(--ink-strong); }

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 14px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ce-spin 0.9s linear infinite;
}
@keyframes ce-spin { to { transform: rotate(360deg); } }

.drop-veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 122, 204, 0.14);
  pointer-events: none;
}
.drop-veil-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--accent);
  border-radius: 16px;
  color: var(--ink-strong);
  background: var(--overlay-bg);
  font-size: 20px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Status bar — 28px row; every item shares the 22px control height.   */
/* ------------------------------------------------------------------ */

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 28px;
  flex: none;
  padding: 0 10px;
  background: var(--status-bg);
  color: var(--status-ink);
  font-size: 12px;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
}
.status-left { overflow: hidden; }
.status-left span { overflow: hidden; text-overflow: ellipsis; }

.lossy { color: #ffd9a0; font-weight: 600; }

.status-btn {
  height: 22px;
  padding: 0 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--status-ink);
  font-size: 12px;
  cursor: pointer;
}
.status-btn:hover { background: rgba(255, 255, 255, 0.16); }
.status-btn.toggle.on { background: rgba(255, 255, 255, 0.24); }

#langSelect {
  height: 22px;
  max-width: 150px;
  padding: 0 2px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--status-ink);
  font-size: 12px;
  cursor: pointer;
}
#langSelect:hover { background: rgba(255, 255, 255, 0.16); }
#langSelect option { color: #222; background: #fff; }

.why-link {
  color: var(--status-ink);
  text-decoration: none;
  opacity: 0.85;
}
.why-link:hover { opacity: 1; text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Toast + helpers                                                     */
/* ------------------------------------------------------------------ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 80;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 8px;
  background: #252526;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
  text-align: center;
}
[data-theme="light"] .toast { background: #333; }
.toast.show { opacity: 1; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .hide-sm { display: none; }
  .topbar { padding: 6px 8px; gap: 5px; }
  .top-actions { gap: 5px; flex-wrap: nowrap; }
  .btn { padding: 0 9px; font-size: 12.5px; }
  /* Secondary actions move into the More menu so the topbar stays
     one row on phones (was four wrapped rows — caught in screenshot QA). */
  #saveAsBtn, #findBtn, #replaceBtn, #commandsBtn, #minimapBtn, #themeBtn,
  .top-actions .sep { display: none; }
  .more-wrap { display: block; }
  .tab { max-width: 140px; }
  .tab-label { max-width: 96px; }
  #langSelect { max-width: 110px; }
  .status-left, .status-right { gap: 8px; }
}

@media (max-width: 480px) {
  .brand-name { display: none; }
}