:root {
  --bg: #f6f6f4;
  --panel: #ffffff;
  --panel-2: #f1f1ee;
  --border: #ddddd7;
  --text: #1f241f;
  --muted: #6c716b;
  --accent: #222c22;
  --accent-2: #3a473a;
  --danger: #9d2a2a;
  --terminal: #0f1412;
  --shadow: 0 10px 36px rgba(0,0,0,.16);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); overflow: hidden; }
button, input, textarea { font: inherit; }
button { border: 1px solid var(--border); background: var(--panel); border-radius: 9px; padding: 8px 11px; cursor: pointer; }
button:hover { background: var(--panel-2); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--accent); color: white; border-color: var(--accent); }
button.primary:hover { background: var(--accent-2); }
button.danger { color: var(--danger); border-color: #e0b5b5; }
button.full { width: 100%; }
input, textarea { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; background: white; color: var(--text); }
textarea { resize: none; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

#app { height: 100vh; }
.main { min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.topbar { height: 58px; background: var(--panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; gap: 12px; flex-shrink: 0; }
.top-left { min-width: 0; display: flex; align-items: center; gap: 10px; flex: 1; }
.top-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.toolbar-btn { font-weight: 600; }

.details-highlight {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(34, 44, 34, .22), 0 2px 8px rgba(34, 44, 34, .16);
}
.details-highlight:hover {
  background: var(--accent-2);
}
.details-highlight::before {
  content: "●";
  font-size: 9px;
  margin-right: 6px;
  color: #f0b34b;
  vertical-align: 1px;
}
.icon-only {
  width: 32px;
  min-width: 32px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
  font-size: 16px !important;
  line-height: 1;
}

.compact-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.compact-brand span { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: white; display: grid; place-items: center; font-weight: 800; }
.compact-brand strong { font-size: 14px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; min-width: 0; flex: 1; }
.tab { display: flex; align-items: center; gap: 8px; max-width: 240px; white-space: nowrap; border-radius: 10px; padding: 8px 10px; background: var(--panel-2); border: 1px solid transparent; }
.tab.active { background: white; border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.tab-name { overflow: hidden; text-overflow: ellipsis; }
.tab-close { border: none; padding: 0 4px; background: transparent; color: var(--muted); }

.client-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 330px; z-index: 1100; background: var(--panel); border-right: 1px solid var(--border); padding: 18px; overflow: auto; transform: translateX(-102%); transition: transform .18s ease; box-shadow: var(--shadow); }
.client-sidebar.open { transform: translateX(0); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 1050; background: rgba(0,0,0,.22); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: white; display: grid; place-items: center; font-weight: 700; }
.brand h1 { font-size: 18px; margin: 0; }
.brand p { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.client-csv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.client-csv-actions button { padding: 8px 9px; font-size: 12px; }
.search { margin: 12px 0; }
.client-list { display: flex; flex-direction: column; gap: 8px; }
.client-card { text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.client-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.client-card strong { display: block; }
.client-card span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-list { padding: 10px 2px; }

.empty-state { display: grid; place-items: center; text-align: center; flex: 1; color: var(--muted); }
.empty-state h2 { color: var(--text); margin-bottom: 4px; }
.workspace { flex: 1; min-height: 0; overflow: hidden; padding: 0; }
.workspace-shell { height: 100%; display: flex; flex-direction: column; position: relative; min-height: 0; }
.workspace-tabbar { height: 45px; display: flex; align-items: end; gap: 6px; padding: 6px 10px 0; border-bottom: 1px solid var(--border); background: #fbfbfa; flex-shrink: 0; }
.workspace-tab { height: 38px; border-radius: 10px 10px 0 0; border-bottom: none; min-width: 110px; font-weight: 600; }
.workspace-tab.active { background: white; border-color: var(--border); position: relative; top: 1px; }
.main-pane { flex: 1; min-height: 0; background: white; }

.details-drawer { position: absolute; top: 45px; right: 0; bottom: 0; width: min(480px, 94vw); z-index: 800; background: var(--panel); border-left: 1px solid var(--border); box-shadow: var(--shadow); transform: translateX(102%); transition: transform .18s ease; display: flex; flex-direction: column; }
.details-drawer.open { transform: translateX(0); }
.details-title { padding: 14px 16px; margin: 0; border-bottom: 1px solid var(--border); }
.details-title h3 { margin: 0; font-size: 16px; }
.details-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.details-body { padding: 12px 14px; overflow: auto; }
.detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.detail-row { display: grid; grid-template-columns: 124px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #eeeeea; }
.detail-row label { font-size: 12px; color: var(--muted); }
.detail-row code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.notes-block { white-space: pre-wrap; background: #fafafa; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }

.browser-pane { height: 100%; display: flex; flex-direction: column; min-height: 0; background: white; }
.browser-tabline { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); background: #fff; flex-shrink: 0; }
.browser-tab-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }

.browser-session-note {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-bar { height: 50px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--border); background: #f7f7f5; flex-shrink: 0; }
.browser-bar input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; }
.full-webview { flex: 1; width: 100%; border: 0; background: white; min-height: 0; }

.terminal-workspace { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--terminal); }
.terminal-toolbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-bottom: 1px solid #26302b; background: #151b18; color: #e8eee8; flex-shrink: 0; }
.terminal-status { display: block; margin-top: 2px; font-size: 12px; color: #a8b3a8; }
.terminal-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.terminal-actions button { background: #202820; color: #e8eee8; border-color: #334033; }
.terminal-actions button.primary { background: #324132; }
.xterm-host { flex: 1; min-height: 0; padding: 10px; overflow: hidden; }
.xterm { height: 100%; }
.terminal-missing { color: #fff; padding: 16px; }

.editor-workspace { height: 100%; display: flex; flex-direction: column; min-height: 0; background: white; }
.editor-toolbar { display: flex; gap: 10px; padding: 10px; border-bottom: 1px solid var(--border); background: #f7f7f5; flex-shrink: 0; }
.file-row { display: flex; gap: 8px; flex: 1; min-width: 0; }
.file-row input { flex: 1; }
.editor-actions { display: flex; gap: 8px; }
.editor-textarea { flex: 1; border: 0; border-radius: 0; min-height: 0; padding: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; line-height: 1.45; outline: none; }
.diff-output { max-height: 260px; margin: 0; border-top: 1px solid var(--border); background: #171a17; color: #edf2ed; padding: 12px; overflow: auto; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 2000; }
.modal { width: min(980px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; background: white; border-radius: 16px; box-shadow: var(--shadow); }
.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.modal-footer { border-bottom: 0; border-top: 1px solid var(--border); justify-content: flex-end; }
.modal-header h2 { margin: 0; font-size: 18px; }
.icon-btn { border: none; background: transparent; font-size: 18px; line-height: 1; min-width: 32px; }
.client-form { padding: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.form-grid .wide { grid-column: 1 / -1; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; }
.toast { position: fixed; right: 18px; bottom: 18px; background: #1f241f; color: white; padding: 10px 14px; border-radius: 12px; z-index: 2500; box-shadow: var(--shadow); }

@media (max-width: 1100px) {
  .compact-brand strong { display: none; }
  .browser-bar button { padding: 7px 8px; }
  .terminal-toolbar { align-items: flex-start; flex-direction: column; }
  .editor-toolbar { flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
}

.editor-status {
  min-height: 32px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: #fbfbfa;
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}


.deployment-status {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #f8f7ef;
  color: #3f463f;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
  flex-shrink: 0;
}
.deployment-status.status-ok { background: #eef7ef; color: #173d20; }
.deployment-status.status-error { background: #fff1f1; color: #8a1f1f; }
.deployment-status.status-working { background: #f8f4e7; color: #5c4210; }
.deployment-status.status-muted { background: #f6f6f4; color: var(--muted); }

.editor-main {
  flex: 1;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 0;
}

.remote-file-browser {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: #f7f7f5;
  overflow: auto;
}

.remote-browser-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  font-size: 12px;
}

.remote-browser-header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-browser-header span {
  color: var(--muted);
  white-space: nowrap;
}

.remote-entry-list {
  padding: 6px;
}

.remote-entry {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px 9px;
  min-height: 34px;
}

.remote-entry:hover {
  background: #ecece7;
}

.remote-entry span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-entry em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.remote-entry.directory span,
.remote-entry.parent span {
  font-weight: 650;
}

.remote-browser-empty {
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
}

.editor-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .editor-main { grid-template-columns: 260px minmax(0, 1fr); }
}

.monaco-editor-host {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
}

.remote-tree {
  padding: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tree-row {
  width: 100%;
  display: grid;
  grid-template-columns: 18px 42px minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding-top: 5px;
  padding-right: 8px;
  padding-bottom: 5px;
  min-height: 28px;
  font-size: 13px;
}

.tree-row:hover {
  background: #ecece7;
}

.tree-row.selected {
  background: #e2e8df;
  box-shadow: inset 3px 0 0 var(--accent);
}

.tree-caret,
.tree-icon,
.tree-meta {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.tree-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-row.directory .tree-name,
.tree-row.parent .tree-name {
  font-weight: 650;
}

.tree-loading {
  color: var(--muted);
  font-size: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.editor-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.editor-actions .danger {
  color: var(--danger);
  border-color: #f1c7c7;
  background: #fffafa;
}

.field-hint { color: #8a9388; font-size: 12px; font-weight: 400; }

/* v0.9 compact workspace chrome */
body {
  background: #fff;
}
button {
  border-radius: 8px;
  padding: 6px 9px;
}
input, textarea {
  border-radius: 8px;
  padding: 7px 9px;
}
.topbar {
  height: 42px;
  padding: 0 10px 0 90px;
  gap: 8px;
  -webkit-app-region: drag;
}
.top-left,
.top-actions,
.tabs,
.tab,
button,
input,
textarea,
select,
.workspace-tabbar,
.browser-controls,
webview {
  -webkit-app-region: no-drag;
}
.top-left { gap: 7px; }
.top-actions { gap: 6px; }
.top-actions button,
.toolbar-btn {
  height: 30px;
  padding: 4px 9px;
  font-size: 13px;
}
.compact-brand span {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 13px;
}
.compact-brand strong {
  font-size: 13px;
}
.tab {
  max-width: 190px;
  height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 13px;
}
.tab-close { padding: 0 3px; }
.workspace-tabbar {
  height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: #fbfbfa;
  flex-shrink: 0;
}
.workspace-tab-group {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
}
.workspace-tab {
  height: 30px;
  min-width: 72px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 650;
  background: transparent;
}
.workspace-tab.active {
  top: 0;
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.workspace-status-note {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 28px 28px 28px minmax(180px, 1fr) 42px auto 64px auto;
  gap: 5px;
  align-items: center;
}
.browser-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text);
}
.browser-tab-dot {
  width: 8px;
  height: 8px;
}
.browser-controls button {
  height: 28px;
  padding: 2px 7px;
  font-size: 13px;
  border-radius: 7px;
}
.browser-controls input {
  height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 7px;
}
.browser-session-note {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
  max-width: 190px;
}
.browser-pane,
.full-webview {
  height: 100%;
}
.details-drawer {
  top: 38px;
}
.terminal-toolbar {
  min-height: 42px;
  padding: 5px 8px;
  gap: 8px;
}
.terminal-toolbar strong { font-size: 13px; }
.terminal-status { font-size: 11px; }
.terminal-actions { gap: 4px; }
.terminal-actions button {
  height: 28px;
  padding: 3px 7px;
  font-size: 12px;
  border-radius: 7px;
}
.xterm-host { padding: 6px; }
.editor-toolbar {
  padding: 6px 8px;
  gap: 6px;
}
.file-row { gap: 5px; }
.editor-actions { gap: 5px; }
.editor-toolbar button,
.editor-actions button {
  height: 30px;
  padding: 4px 8px;
  font-size: 12px;
}
.editor-status {
  min-height: 26px;
  padding: 5px 10px;
}
.remote-browser-header { padding: 7px 9px; }
.remote-entry { min-height: 28px; padding: 5px 7px; }
.tree-row { min-height: 25px; padding-top: 3px; padding-bottom: 3px; }
body.compact-mode .topbar {
  display: none;
}
body.compact-mode .workspace-tabbar {
  padding-left: 90px;
  -webkit-app-region: drag;
}
body.compact-mode .workspace-tab-group,
body.compact-mode .browser-controls,
body.compact-mode .workspace-status-note,
body.compact-mode button,
body.compact-mode input {
  -webkit-app-region: no-drag;
}
body.compact-mode .workspace-tabbar {
  height: 34px;
  padding-top: 3px;
  padding-bottom: 3px;
}
body.compact-mode .workspace-tab,
body.compact-mode .browser-controls button,
body.compact-mode .browser-controls input {
  height: 26px;
}
body.compact-mode .details-drawer {
  top: 34px;
}
@media (max-width: 1200px) {
  .compact-brand strong,
  .browser-session-note,
  .browser-title { display: none; }
  .browser-controls { grid-template-columns: 28px 28px 28px minmax(140px, 1fr) 42px auto 58px; }
}
.floating-focus {
  position: fixed;
  top: 6px;
  right: 8px;
  z-index: 1800;
  height: 24px;
  padding: 2px 8px;
  border-radius: 7px;
  font-size: 12px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
/* v0.12: keep mounted panes full-height.
   Without this, browser webviews can shrink to their natural content height,
   leaving a large white area below ChatGPT/Gemini/Odoo. */
.main-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.pane-container {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.pane-container:not(.hidden) {
  display: flex;
  flex-direction: column;
}
.browser-pane,
.terminal-workspace,
.editor-workspace {
  flex: 1;
  height: 100%;
  min-height: 0;
}
.full-webview {
  display: flex;
  flex: 1;
  height: 100%;
  min-height: 0;
}

/* v0.13: macOS hidden-inset traffic-light safe area for the Clients drawer.
   The native red/yellow/green buttons float above the web content, so drawers
   that start at the top-left must leave vertical space before their header. */
.client-sidebar {
  padding-top: 52px;
}

/* v0.15: multi-window client launcher controls */
.client-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
}
.client-card-main {
  min-width: 0;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  border-radius: 8px;
}
.client-card-main:hover {
  background: transparent;
}
.client-card-window {
  align-self: center;
  padding: 6px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.client-card-main strong { display: block; }
.client-card-main span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1280px) {
  #newWindowBtn,
  #popoutClientBtn {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.discovery-modal {
  width: min(1180px, calc(100vw - 42px));
}

.discovery-body {
  padding: 14px 16px;
}

.discovery-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.discovery-grid h3,
.discovery-details h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.discovery-pre {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7f7f5;
  color: var(--text);
  white-space: pre-wrap;
  overflow: auto;
  max-height: 300px;
  font-size: 12px;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.discovery-pre.raw {
  max-height: 360px;
  background: #111713;
  color: #e9eee9;
}

.discovery-table-head,
.discovery-row {
  display: grid;
  grid-template-columns: 24px 140px minmax(0, 1fr) minmax(0, 1fr) 120px;
  gap: 8px;
  align-items: center;
}

.discovery-table-head {
  padding: 0 8px 6px;
  color: var(--muted);
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}

.discovery-row {
  padding: 8px;
  border-bottom: 1px solid #eeeeea;
  font-size: 12px;
}

.discovery-row:hover {
  background: #fafaf8;
}

.discovery-row.muted-row {
  opacity: .65;
}

.discovery-label {
  font-weight: 650;
}

.discovery-current,
.discovery-suggested {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.discovery-suggested {
  color: var(--accent);
}

.discovery-status {
  color: var(--muted);
  font-size: 11px;
}

.discovery-details {
  margin-top: 14px;
}

.discovery-details summary {
  cursor: pointer;
  font-weight: 650;
  margin-bottom: 8px;
}

@media (max-width: 1100px) {
  .discovery-grid { grid-template-columns: 1fr; }
  .discovery-table-head,
  .discovery-row { grid-template-columns: 24px 120px minmax(0, 1fr); }
  .discovery-table-head span:nth-child(4),
  .discovery-table-head span:nth-child(5),
  .discovery-current,
  .discovery-status { display: none; }
}

/* Backup Center */
.backup-workspace {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f7f7f5;
}

.backup-header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
  flex-shrink: 0;
}

.backup-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.backup-option {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.backup-option input { width: auto; }

.backup-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}

.backup-card {
  min-height: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  overflow: auto;
}

.backup-card h3 { margin: 0 0 12px; font-size: 16px; }

.backup-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.backup-fields {
  border: 1px solid #eeeeea;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.backup-fields > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid #eeeeea;
  align-items: center;
}
.backup-fields > div:last-child { border-bottom: 0; }
.backup-fields span { color: var(--muted); font-size: 12px; }
.backup-fields code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.backup-help { line-height: 1.4; }

.backup-status {
  min-height: 220px;
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--terminal);
  color: #e8eee8;
  white-space: pre-wrap;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
}

.backup-history-card { display: flex; flex-direction: column; }
.backup-history-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.backup-history-title h3 { margin: 0; }

.backup-history-list {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.backup-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #eeeeea;
  border-radius: 12px;
  padding: 10px;
  background: #fbfbfa;
}

.backup-history-row strong { display: block; }
.backup-history-row span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.backup-history-row code {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
}

.backup-warning {
  display: block;
  margin-top: 5px;
  color: var(--danger);
  font-size: 12px;
  font-style: normal;
}

.backup-history-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.backup-history-meta span { margin: 0; min-width: 64px; text-align: right; }
.backup-history-meta button { padding: 7px 9px; }

@media (max-width: 1100px) {
  .backup-main { grid-template-columns: 1fr; overflow: auto; }
  .backup-card { overflow: visible; }
  .backup-history-row { grid-template-columns: 1fr; }
  .backup-history-meta { justify-content: flex-start; }
}

.backup-subheading {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px solid #eeeeea;
}

.backup-side-column {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(240px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  overflow: hidden;
}

.server-backup-row .danger {
  border-color: rgba(169, 46, 46, 0.35);
  color: var(--danger);
  background: #fffafa;
}

.server-backup-card {
  min-height: 0;
}

@media (max-width: 1100px) {
  .backup-side-column { overflow: visible; grid-template-rows: auto auto; }
}

/* Editor context menu / Backup Center integration */
.editor-context-menu {
  position: fixed;
  z-index: 2000;
  min-width: 230px;
  max-width: 360px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  font-size: 13px;
}

.editor-context-title {
  padding: 7px 9px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid #eeeeea;
  margin-bottom: 4px;
}

.editor-context-menu button {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 8px 9px;
  font-size: 13px;
}

.editor-context-menu button:hover {
  background: #f2f2ef;
}

.editor-context-menu button.danger {
  color: var(--danger);
}

/* Deploy choice dialog */
.deploy-choice-modal {
  width: min(720px, calc(100vw - 40px));
}

.deploy-choice-body {
  padding: 16px;
}

.deploy-choice-body p {
  margin: 0 0 8px;
}

.deploy-choice-body code {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7f7f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
  margin-bottom: 14px;
}

.deploy-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.deploy-choice-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: #fbfbfa;
}

.deploy-choice-card strong {
  display: block;
  margin-bottom: 6px;
}

.deploy-choice-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.deploy-choice-card.safe {
  border-color: rgba(31, 53, 33, 0.35);
  background: #f3f7f3;
}

.deploy-choice-card.overwrite {
  border-color: rgba(169, 46, 46, 0.28);
  background: #fffafa;
}

.modal-footer button.danger {
  border-color: rgba(169, 46, 46, 0.35);
  color: var(--danger);
  background: #fffafa;
}

@media (max-width: 760px) {
  .deploy-choice-grid { grid-template-columns: 1fr; }
}


/* Dashboard */
.dashboard-workspace {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #f7f7f5;
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.dashboard-header strong { display: block; font-size: 16px; }
.dashboard-header span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.dashboard-actions { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.dashboard-actions select {
  min-width: 180px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 4px 8px;
}
.dashboard-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.dashboard-summary button,
.dashboard-summary > div {
  text-align: left;
  border: 1px solid var(--border);
  background: #fbfbfa;
  border-radius: 12px;
  padding: 9px 10px;
}
.dashboard-summary strong { display: block; font-size: 20px; line-height: 1; }
.dashboard-summary span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.dashboard-summary.loading-soft { opacity: .65; }
.dashboard-main {
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.35fr);
  gap: 12px;
}
.dashboard-panel {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.dashboard-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.dashboard-panel-header h3 { margin: 0; font-size: 16px; }
.dashboard-panel-header span { color: var(--muted); font-size: 12px; }
.dashboard-client-rows,
.dashboard-ticket-rows {
  min-height: 0;
  overflow: auto;
  padding: 10px;
}
.dashboard-client-row,
.dashboard-ticket-row {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfbfa;
  padding: 10px;
  margin-bottom: 9px;
}
.dashboard-client-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}
.dashboard-client-row.needs-attention,
.dashboard-ticket-row.overdue {
  border-left: 4px solid var(--danger);
}
.dashboard-client-main {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
}
.dashboard-client-main strong,
.dashboard-ticket-main strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}
.dashboard-client-main span,
.dashboard-ticket-main p,
.dashboard-ticket-main small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.dashboard-client-metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 420px;
}
.dashboard-client-metrics small { color: var(--muted); font-size: 11px; width: 100%; text-align: right; }
.metric {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f1f1ee;
  color: #293329;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
}
.metric.bad { color: var(--danger); background: #fff0f0; }
.dashboard-ticket-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.dashboard-ticket-main { min-width: 0; }
.dashboard-ticket-main .ticket-badges { margin-bottom: 7px; }
.dashboard-ticket-actions { display: flex; gap: 7px; white-space: nowrap; }
@media (max-width: 1100px) {
  .dashboard-main { grid-template-columns: 1fr; overflow: auto; }
  .dashboard-panel { min-height: 360px; }
  .dashboard-summary { grid-template-columns: repeat(2, 1fr); }
  .dashboard-client-row, .dashboard-ticket-row { grid-template-columns: 1fr; }
  .dashboard-client-metrics { justify-content: flex-start; max-width: none; }
  .dashboard-client-metrics small { text-align: left; }
}

/* Ticketing */
.tickets-workspace {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  background: #f7f7f5;
}

.tickets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.tickets-header strong { display: block; font-size: 16px; }
.tickets-subtitle { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tickets-actions { display: flex; gap: 8px; align-items: center; white-space: nowrap; }

.ticket-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.ticket-stats button, .ticket-stats > div {
  text-align: left;
  border: 1px solid var(--border);
  background: #fbfbfa;
  border-radius: 12px;
  padding: 9px 10px;
}
.ticket-stats strong { display: block; font-size: 20px; line-height: 1; }
.ticket-stats span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }

.ticket-filters {
  display: grid;
  grid-template-columns: 170px 150px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 14px;
  background: #fbfbfa;
  border-bottom: 1px solid var(--border);
}
.ticket-filters select, .ticket-filters input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  background: #fff;
  font: inherit;
}

.tickets-main {
  min-height: 0;
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  overflow: hidden;
}

.ticket-list {
  min-height: 0;
  overflow: auto;
  padding: 10px;
  border-right: 1px solid var(--border);
  background: #fff;
}

.ticket-card {
  width: 100%;
  display: block;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fbfbfa;
  padding: 10px;
  margin-bottom: 8px;
}
.ticket-card:hover { background: #f3f3ef; }
.ticket-card.active { border-color: var(--accent); background: #eef3ec; }
.ticket-card.urgent { border-left: 4px solid var(--danger); }
.ticket-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ticket-card-top strong { font-size: 14px; line-height: 1.25; }
.ticket-card-top em {
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  background: #e9efe7;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
}
.ticket-card-meta, .ticket-card-action {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}
.ticket-card-action { color: #283228; }

.ticket-detail {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: #fff;
}
.ticket-empty {
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--muted);
}
.ticket-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ticket-detail-header h2 { margin: 8px 0 3px; font-size: 24px; }
.ticket-detail-actions, .ticket-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ticket-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ticket-badges span, .priority-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f1f1ee;
  color: #283228;
  font-size: 12px;
  font-weight: 700;
}
.priority-P0, .priority-P1 { background: #fff0f0 !important; color: var(--danger) !important; }
.priority-P2 { background: #eef3ec !important; color: var(--accent) !important; }

.ticket-next-action {
  margin: 14px 0;
  border: 1px solid rgba(31, 53, 33, 0.18);
  background: #f3f7f3;
  border-radius: 14px;
  padding: 12px;
}
.ticket-next-action label, .ticket-grid label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.ticket-next-action strong { font-size: 16px; }

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.ticket-grid > div {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: #fbfbfa;
  overflow: hidden;
}
.ticket-grid .wide { grid-column: 1 / -1; }
.ticket-grid code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ticket-section {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.ticket-section h3 { margin: 0 0 8px; }
.ticket-section pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.45;
  color: #243024;
}
.ticket-actions-row {
  margin-top: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ticket-events > div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px;
  margin-bottom: 7px;
  background: #fbfbfa;
}
.ticket-events span { display: block; color: var(--muted); font-size: 12px; }
.ticket-events strong { display: block; margin-top: 2px; }
.ticket-events p { margin: 4px 0 0; white-space: pre-wrap; }
.ticket-modal { width: min(980px, calc(100vw - 40px)); }

@media (max-width: 1000px) {
  .tickets-main { grid-template-columns: 1fr; }
  .ticket-list { border-right: 0; border-bottom: 1px solid var(--border); max-height: 320px; }
  .ticket-filters { grid-template-columns: 1fr; }
  .ticket-stats { grid-template-columns: repeat(2, 1fr); }
  .ticket-detail-header, .ticket-detail-actions { display: block; }
  .ticket-grid { grid-template-columns: 1fr; }
}

/* v0.32: global dashboard is available before opening a client; client workspaces use Tickets instead. */
.global-dashboard-shell {
  background: #f7f7f5;
}
.dashboard-nav-btn {
  font-weight: 700;
}

.ticket-attachments {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.018);
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-title-row h3,
.section-title-row h4 {
  margin: 0;
}

.ticket-attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.ticket-attachment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.ticket-attachment-row strong,
.ticket-attachment-row span,
.ticket-attachment-row small {
  display: block;
}

.ticket-attachment-row span,
.ticket-attachment-row small {
  margin-top: 4px;
  color: var(--muted);
}

.ticket-attachment-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ticket-attachment-reader {
  margin-top: 12px;
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.ticket-attachment-reader pre {
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.45;
  margin: 12px 0 0;
}

.warning-text {
  color: #b45309 !important;
}

/* v0.34 attachment preview popup */
.attachment-preview-backdrop {
  z-index: 2600;
}

.attachment-preview-modal {
  width: min(1180px, calc(100vw - 44px));
  height: min(860px, calc(100vh - 44px));
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.attachment-preview-header {
  flex: 0 0 auto;
}

.attachment-preview-header h2 {
  max-width: 620px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.attachment-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: #f7f7f5;
}

.attachment-pdf-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
}

.attachment-text-preview {
  margin: 0;
  padding: 18px;
  min-height: 100%;
  background: white;
  color: #101810;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.attachment-image-wrap {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 18px;
}

.attachment-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.attachment-preview-empty {
  padding: 28px;
  max-width: 720px;
}

.ticket-client-select {
  max-width: 360px;
  min-width: 220px;
  height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

/* v0.46: sleek dense workspace/browser rail.
   With many client panes (Tickets/Odoo/Gemini/GPT/Gmail/Helpdesk/Backups/Terminal/Editor),
   CSS grid was creating implicit columns and squeezing buttons until labels wrapped.
   Use a flex rail instead: tabs take only the space they need and browser controls use the rest. */
.workspace-tabbar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  background: #fbfbfa;
  flex-shrink: 0;
  min-width: 0;
}
.workspace-tab-group {
  flex: 0 1 auto;
  max-width: 48vw;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.workspace-tab-group::-webkit-scrollbar { display: none; }
.workspace-tab {
  flex: 0 0 auto;
  height: 30px;
  min-width: 0;
  padding: 4px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  white-space: nowrap;
}
.workspace-tab.active {
  top: 0;
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 1px 5px rgba(0,0,0,.05);
}
.workspace-status-note {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-controls {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.browser-controls.hidden { display: none !important; }
.browser-title {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 92px;
  font-size: 12px;
  font-weight: 750;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.browser-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-tab-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.browser-controls input {
  flex: 1 1 280px;
  min-width: 160px;
  height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
}
.browser-controls button {
  flex: 0 0 auto;
  height: 28px;
  padding: 2px 8px;
  font-size: 13px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1;
}
.browser-controls .browser-go {
  min-width: 38px;
}
.browser-controls .browser-ticket {
  min-width: 66px;
}
.browser-session-note {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 130px;
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1500px) {
  .workspace-tab-group { max-width: 43vw; }
  .browser-title-text,
  .browser-session-note { display: none; }
  .browser-title { max-width: 14px; }
  .browser-controls input { min-width: 130px; }
}
@media (max-width: 1150px) {
  .workspace-tab-group { max-width: 52vw; }
  .browser-controls .browser-ticket { min-width: 0; }
  .browser-controls button { padding-left: 7px; padding-right: 7px; }
  .browser-controls input { min-width: 90px; }
}
body.compact-mode .workspace-tabbar {
  height: 34px;
  padding: 3px 8px 3px 90px;
  -webkit-app-region: drag;
}
body.compact-mode .workspace-tab,
body.compact-mode .browser-controls button,
body.compact-mode .browser-controls input {
  height: 26px;
}
body.compact-mode .browser-title-text,
body.compact-mode .browser-session-note { display: none; }

.env-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  border: 1px solid var(--border);
  color: var(--muted);
  background: #f7f7f4;
  vertical-align: middle;
  flex-shrink: 0;
}
.env-production { background: #eaf5ed; color: #1d5b31; border-color: #b9dfc4; }
.env-staging { background: #fff4dc; color: #7d5200; border-color: #ffd48a; }
.env-development { background: #e9f1ff; color: #24508f; border-color: #bfd5ff; }
.env-testing, .env-uat { background: #f3eafe; color: #5e357d; border-color: #dcc2f4; }
.tab .env-badge { margin-left: -2px; }
.client-card-main strong .env-badge { margin-left: 6px; }


/* v0.49: make the selected client/environment impossible to miss */
.active-environment-banner {
  min-height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, #f5f6f2, #ffffff);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.02);
}
.active-env-left,
.active-env-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.active-env-left strong {
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38vw;
}
.active-env-kicker {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
}
.active-env-context {
  justify-content: flex-end;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
}
.active-env-group {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.active-env-info {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
}
.active-env-production {
  background: linear-gradient(90deg, #fff0ed, #fff8f6 48%, #ffffff);
  border-bottom-color: #f0b8ad;
  box-shadow: inset 5px 0 0 #c2412f;
}
.active-env-staging {
  background: linear-gradient(90deg, #fff7e6, #fffdf6 48%, #ffffff);
  border-bottom-color: #f0ce8b;
  box-shadow: inset 5px 0 0 #d89516;
}
.active-env-development {
  background: linear-gradient(90deg, #eef5ff, #f8fbff 48%, #ffffff);
  border-bottom-color: #b7d2ff;
  box-shadow: inset 5px 0 0 #2f6ecb;
}
.active-env-testing,
.active-env-uat {
  background: linear-gradient(90deg, #f5edff, #fbf8ff 48%, #ffffff);
  border-bottom-color: #d5bdf5;
  box-shadow: inset 5px 0 0 #7d4db5;
}
.active-env-unknown {
  box-shadow: inset 5px 0 0 #8a8f87;
}

/* Production should look like caution, not like a safe green pill. */
.env-production {
  background: #fff0ed;
  color: #9b2f24;
  border-color: #efb6ad;
}
.env-staging {
  background: #fff4dc;
  color: #7d5200;
  border-color: #ffd48a;
}
.env-development {
  background: #e9f1ff;
  color: #24508f;
  border-color: #bfd5ff;
}
.env-testing, .env-uat {
  background: #f3eafe;
  color: #5e357d;
  border-color: #dcc2f4;
}

.tab.active {
  background: #ffffff;
  border-color: #222c22;
  box-shadow: 0 0 0 2px rgba(34,44,34,.13), 0 2px 10px rgba(0,0,0,.08);
  font-weight: 800;
  max-width: 340px;
}
.tab.active .tab-name {
  color: var(--text);
}
.tab.env-tab-production.active {
  border-color: #c2412f;
  box-shadow: 0 0 0 2px rgba(194,65,47,.18), 0 2px 10px rgba(0,0,0,.08);
}
.tab.env-tab-staging.active {
  border-color: #d89516;
  box-shadow: 0 0 0 2px rgba(216,149,22,.18), 0 2px 10px rgba(0,0,0,.08);
}
.tab:not(.active) {
  opacity: .78;
}
.tab:not(.active):hover {
  opacity: 1;
}
.workspace-shell:not(.global-dashboard-shell) .details-drawer {
  top: 76px;
}
body.compact-mode .active-environment-banner {
  min-height: 34px;
  padding-top: 4px;
  padding-bottom: 4px;
}
body.compact-mode .workspace-shell:not(.global-dashboard-shell) .details-drawer {
  top: 68px;
}
@media (max-width: 1150px) {
  .active-env-info { display: none; }
  .active-env-left strong { max-width: 44vw; }
}


/* v0.50: remove the extra current-environment banner and make the active client tab carry the context. */
.tab.active {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(34,44,34,.18), 0 3px 12px rgba(34,44,34,.18) !important;
  font-weight: 900;
  opacity: 1;
}
.tab.active .tab-name,
.tab.active .tab-close {
  color: #ffffff !important;
}
.tab.active .tab-close {
  opacity: .85;
}
.tab.active .tab-close:hover {
  opacity: 1;
  background: rgba(255,255,255,.12);
  border-radius: 5px;
}
.tab.active .env-badge {
  background: rgba(255,255,255,.13) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.tab.env-tab-production.active,
.tab.env-tab-staging.active,
.tab.env-tab-development.active,
.tab.env-tab-testing.active,
.tab.env-tab-uat.active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(34,44,34,.18), 0 3px 12px rgba(34,44,34,.18) !important;
}
.workspace-shell:not(.global-dashboard-shell) .details-drawer {
  top: 38px;
}
body.compact-mode .workspace-shell:not(.global-dashboard-shell) .details-drawer {
  top: 34px;
}

/* v0.51 onboarding */
.secondary.full {
  width: 100%;
  margin-top: 8px;
  background: #ffffff;
  color: #1b2a1d;
  border: 1px solid #cfd8cf;
  font-weight: 700;
}
.onboarding-modal {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 36px);
}
.onboarding-warning {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #f0d18a;
  border-radius: 12px;
  background: #fff9e9;
  color: #2c2c20;
}
.terminal-output {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #0c1410;
  color: #ecf3ec;
  min-height: 180px;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}


/* v0.51.1 verified full installer build */
.install-highlight {
  background: #1b2a1d !important;
  color: #ffffff !important;
  border-color: #1b2a1d !important;
  font-weight: 800 !important;
}
.install-highlight::before {
  content: "+ ";
  color: #f2b94b;
}
.enterprise-package-status {
  padding: 10px 12px;
  border: 1px solid #d8ddd8;
  border-radius: 10px;
  background: #f7f8f7;
  color: #526052;
  font-size: 13px;
  font-weight: 700;
}
.enterprise-package-status.ready {
  border-color: #a9d5b1;
  background: #eff9f1;
  color: #1f6b2d;
}
.enterprise-package-status.missing {
  border-color: #e4aaa2;
  background: #fff2f0;
  color: #a4362a;
}

/* Make the currently targeted SSH client unambiguous when editing production files. */
.editor-client-context {
  padding: 5px 10px;
  background: #f7f7f5;
  color: #414c47;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  flex-shrink: 0;
}
.editor-client-context strong { color: #182b21; }