:root {
  --bg: #0f1115;
  --panel: #181b22;
  --panel-2: #1f232c;
  --border: #2a2f3a;
  --text: #e6e8ed;
  --muted: #9aa1b2; /* M7: subido de #8a91a0 p/ melhor contraste (AA a 11px) */
  --accent: #6cc4ff;
  --green: #45d28a;
  --amber: #ffb454;
  --red: #ff5e6b;
  --grey: #5a6172;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
header h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
header .stamp { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 16px;
  padding: 16px 24px 32px;
  max-width: 1600px;
  margin: 0 auto;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card.wide { grid-column: span 2; }
.card.full { grid-column: 1/-1; }
@media (max-width: 800px) {
  .card.wide, .card.full { grid-column: 1/-1; }
}
.card h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inline-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}
.inline-control select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 6px;
  font: inherit;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 10px;
}
.overview-kpi {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--grey);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 92px;
}
.overview-kpi.good { border-left-color: var(--green); }
.overview-kpi.warn { border-left-color: var(--amber); }
.overview-kpi.bad { border-left-color: var(--red); }
.overview-kpi .lbl {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.overview-kpi .val {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.overview-kpi.good .val { color: var(--green); }
.overview-kpi.warn .val { color: var(--amber); }
.overview-kpi.bad .val { color: var(--red); }
.overview-kpi .meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.overview-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 8px;
}
.overview-action {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(108,196,255,0.24);
  background: rgba(108,196,255,0.06);
  font-size: 12px;
}
.overview-action.warn { border-color: rgba(255,180,84,0.32); background: rgba(255,180,84,0.08); }
.overview-action.error { border-color: rgba(255,94,107,0.36); background: rgba(255,94,107,0.08); }
.overview-action span { color: var(--muted); font-size: 11px; }
.mac-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 800px) { .mac-grid { grid-template-columns: 1fr; } }
.mac-tile {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid transparent;
  position: relative;
}
.mac-tile .name { font-weight: 600; font-size: 13px; }
.mac-tile .alias { color: var(--muted); font-size: 11px; margin-left: 6px; }
.mac-tile .meta { color: var(--muted); font-size: 11px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.mac-tile .row { display: flex; gap: 16px; margin-top: 8px; }
.mac-tile .row .kpi { flex: 1; min-width: 0; }
.kpi .label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.kpi .value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.kpi .bar > span { display: block; height: 100%; background: var(--accent); transition: width 0.4s ease; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.amber { background: var(--amber); }
.dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot.grey { background: var(--grey); }
.daemon-list, .worker-list { display: flex; flex-direction: column; gap: 4px; }
.daemon, .worker {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-2);
  border-radius: 6px;
  align-items: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.daemon .label, .worker .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SF Mono, monospace; }
.daemon .host, .worker .host { color: var(--muted); font-size: 11px; }
.queue-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.queue-counts .c {
  text-align: center;
  padding: 8px 4px;
  background: var(--panel-2);
  border-radius: 6px;
}
.queue-counts .c .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.queue-counts .c .l { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.queue-counts .c.pending .n { color: var(--amber); }
.queue-counts .c.running .n { color: var(--accent); }
.queue-counts .c.done .n { color: var(--green); }
.queue-counts .c.error .n { color: var(--red); }
.queue-items { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.qi {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-2);
  border-radius: 6px;
  font-size: 12px;
  align-items: center;
}
.qi .prompt { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi .when { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.events { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; }
.ev { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; padding: 4px 8px; background: var(--panel-2); border-radius: 4px; font-size: 12px; align-items: baseline; }
.ev .sev { font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
.ev.warn .sev { color: var(--amber); }
.ev.error .sev { color: var(--red); }
.ev.info .sev { color: var(--accent); }
.ev .when { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.sync-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; background: var(--panel-2); border-radius: 6px; font-size: 12px; }
.sync-row .hash { font-family: ui-monospace, monospace; color: var(--muted); }
.sync-row .when { color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-wrap { position: relative; height: 200px; }
canvas { max-width: 100% !important; height: 100% !important; }
.controls { display: flex; gap: 8px; align-items: center; }
.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}
.btn.active { background: var(--accent); color: #0f1115; border-color: var(--accent); }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 12px; text-align: center; font-size: 12px; }

/* ─── Arquitectura dos bots ─── */
.arch-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.arch-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.bot-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--panel-2); font-size: 13px; }
.bot-icon.kind-ai { background: rgba(108,196,255,0.15); }
.bot-icon.kind-queue { background: rgba(255,180,84,0.15); }
.bot-icon.kind-sync { background: rgba(69,210,138,0.15); }
.bot-icon.kind-gateway { background: rgba(154,140,255,0.18); }
.bot-icon.kind-scheduler { background: rgba(255,94,107,0.15); }

.arch-board { position: relative; min-height: 480px; }
.arch-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.arch-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; position: relative; z-index: 1; }
@media (max-width: 1000px) { .arch-cols { grid-template-columns: 1fr; } .arch-svg { display: none; } }
.arch-col { display: flex; flex-direction: column; gap: 10px; }
.arch-col-head {
  background: var(--panel-2);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: center;
}
.arch-col-head .name { font-weight: 600; font-size: 13px; }
.arch-col-head .role { color: var(--muted); font-size: 11px; margin-top: 2px; }
.bot-card {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  position: relative;
  transition: border-color 0.2s;
}
.bot-card.alive { border-color: rgba(69,210,138,0.35); }
.bot-card.dead { border-color: rgba(255,94,107,0.35); opacity: 0.7; }
.bot-card .header { display: flex; align-items: center; gap: 8px; }
.bot-card .title { font-weight: 600; font-size: 13px; flex: 1; }
.bot-card .status-dot { width: 8px; height: 8px; border-radius: 50%; }
.bot-card .status-dot.alive { background: var(--green); box-shadow: 0 0 6px var(--green); }
.bot-card .status-dot.dead { background: var(--red); }
.bot-card .status-dot.unknown { background: var(--grey); }
.bot-card .label { font-family: ui-monospace, monospace; font-size: 10px; color: var(--muted); margin-top: 1px; }
.bot-card .role-text { color: var(--text); font-size: 11px; line-height: 1.45; margin-top: 6px; opacity: 0.85; }
.bot-card .pid { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.bot-card .conns { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.bot-card .conn { font-size: 10px; color: var(--muted); display: flex; gap: 4px; align-items: baseline; }
.bot-card .conn .arrow { color: var(--accent); }
.bot-card .conn.external .target { color: var(--amber); }

/* ─── Compose bar (Quick Compose) ─── */
#compose-bar {
  padding: 10px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  position: sticky;
}
#compose-bar { position: sticky; }
#compose-bar, #taskq-card { position: relative; }

/* Anexos (drop de ficheiros / fotos) */
.attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.attach-list:empty { display: none; }
.attach-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2, #14181f);
  border: 1px solid var(--border, #232936);
  border-radius: 8px;
  padding: 3px 5px 3px 3px;
  font-size: 11px;
  color: var(--text, #d1d5db);
}
.attach-item .att-thumb {
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 4px;
  background: #0f1115;
  border: 1px solid var(--border, #232936);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #8a93a3; text-transform: uppercase;
}
.attach-item .att-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-item .att-x { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 14px; padding: 0 3px; }
.attach-item .att-x:hover { color: var(--red, #ef4444); }

.dropzone-hint {
  display: none;
  position: absolute; inset: 4px;
  border: 2px dashed var(--accent, #6cc4ff);
  border-radius: 10px;
  background: rgba(108,196,255,0.08);
  color: var(--accent, #6cc4ff);
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  pointer-events: none;
  z-index: 60;
}
#compose-bar.dropping #compose-dropzone-hint,
#taskq-card.dropping #taskq-dropzone-hint { display: flex; }

.fleet-chip.dropping {
  border-color: var(--accent, #6cc4ff) !important;
  background: rgba(108,196,255,0.10) !important;
  box-shadow: 0 0 0 2px rgba(108,196,255,0.30);
}
.fleet-chip { cursor: default; }

.tq-attach-badge { display: inline-flex; align-items: center; gap: 3px; color: var(--accent, #7dd3fc); font-size: 11px; margin-left: 4px; }
#compose-form {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
}
.cmp-icon { font-size: 16px; }
#compose-input {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  outline: none;
}
#compose-input:focus { border-color: var(--accent); }
#compose-bar .btn.primary { background: var(--accent); color: #0f1115; border-color: var(--accent); font-weight: 600; padding: 7px 14px; }
#compose-toast {
  max-width: 1600px;
  margin: 6px auto 0;
  font-size: 12px;
  min-height: 14px;
}
#compose-toast.ok { color: var(--green); }
#compose-toast.err { color: var(--red); }

/* ─── Suggestions bar ─── */
#suggestions-bar { padding: 0 24px; margin-top: 8px; max-width: 1600px; margin-left: auto; margin-right: auto; }
#suggestions-bar:not(:empty) { padding: 8px 24px; }
.suggestion {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  border: 1px solid;
}
.suggestion.error { background: rgba(255,94,107,0.10); border-color: rgba(255,94,107,0.40); color: #ffb4ba; }
.suggestion.warn { background: rgba(255,180,84,0.10); border-color: rgba(255,180,84,0.40); color: #ffd18c; }
.suggestion.info { background: rgba(108,196,255,0.08); border-color: rgba(108,196,255,0.30); color: #b9def8; }
.suggestion .text { flex: 1; }
.suggestion .text strong { display: block; margin-bottom: 1px; }
.suggestion .text span { font-size: 11px; opacity: 0.85; }
.suggestion button { font-size: 11px; padding: 4px 10px; border-radius: 6px; background: var(--bg); border: 1px solid currentColor; color: inherit; cursor: pointer; }

/* ─── Action buttons in bot cards ─── */
.bot-card .actions { display: flex; gap: 4px; margin-top: 8px; }
.bot-card .actions button {
  flex: 1;
  padding: 4px 6px;
  font-size: 10px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.bot-card .actions button:hover { color: var(--text); border-color: var(--accent); }
.bot-card .actions button.danger:hover { color: var(--red); border-color: var(--red); }

/* ─── Modal de logs ─── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(900px, 92vw);
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.modal-head h3 { margin: 0; font-size: 14px; flex: 1; }
.modal-head button { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; }
.modal-body {
  padding: 12px 16px;
  overflow-y: auto;
  font-family: ui-monospace, SF Mono, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  line-height: 1.45;
  flex: 1;
  color: var(--text);
}

/* ─── In-app toast/notification ─── */
#toast-stack {
  position: fixed; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200;
  max-width: 360px;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  animation: slideIn 0.25s ease-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.toast.warn { border-left-color: var(--amber); }
.toast.error { border-left-color: var(--red); }
.toast strong { display: block; margin-bottom: 2px; font-size: 13px; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ─── OAuth status ─── */
#compose-target {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
#compose-target:focus { border-color: var(--accent); }
.oauth-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--panel-2);
  border-radius: 8px;
  border-left: 3px solid var(--border);
  font-size: 12px;
}
.oauth-row.ok { border-left-color: var(--green); }
.oauth-row.warn { border-left-color: var(--amber); }
.oauth-row.missing { border-left-color: var(--grey); opacity: 0.7; }
.oauth-row .host { font-weight: 600; }
.oauth-row .path { font-family: ui-monospace, monospace; font-size: 10px; color: var(--muted); }
.oauth-row .ver { font-family: ui-monospace, monospace; font-size: 10px; color: var(--accent); }
.oauth-row .activity { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
.oauth-row .activity.hot { color: var(--green); font-weight: 600; }
.oauth-row .badge {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
}
.oauth-row .badge.ok { color: var(--green); border-color: rgba(69,210,138,0.4); }
.oauth-row .badge.missing { color: var(--red); border-color: rgba(255,94,107,0.4); }

/* ─── Compose: batch toggle ─── */
.batch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
}
.batch-toggle input { cursor: pointer; margin: 0; }
.batch-toggle:has(input:checked) { color: var(--amber); border-color: var(--amber); }

/* ─── Sessões ─── */
.session-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--panel-2);
  border-radius: 8px;
  border-left: 3px solid var(--border);
  font-size: 12px;
}
.session-row.bloated { border-left-color: var(--red); background: rgba(255,94,107,0.06); }
.session-row.warning { border-left-color: var(--amber); }
.session-row.queue-main { border-left-color: var(--accent); }
.session-row .id { font-family: ui-monospace, monospace; font-size: 11px; }
.session-row .meta { color: var(--muted); font-size: 11px; }
.session-row .tokens { font-variant-numeric: tabular-nums; }
.session-row .tokens.huge { color: var(--red); font-weight: 700; }
.session-row .tokens.big { color: var(--amber); font-weight: 600; }
.session-row .cost { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }
.session-row .badge {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
}
.session-row .badge.queue { background: rgba(108,196,255,0.15); border-color: var(--accent); color: var(--accent); }
.session-row button {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
}
.session-row button:hover { color: var(--text); border-color: var(--accent); }
.session-row button.rotate { color: var(--amber); border-color: var(--amber); }
.session-row button.rotate:hover { background: var(--amber); color: var(--bg); }

/* ─── Compose: dropdown modelo + preview ─── */
#compose-model {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
#compose-model:focus { border-color: var(--accent); }
#compose-preview {
  max-width: 1600px;
  margin: 4px auto 0;
  font-size: 11px;
  color: var(--muted);
  min-height: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#compose-preview .badge {
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}
#compose-preview .savings { color: var(--green); }
#compose-preview .warn { color: var(--amber); }
#compose-preview .error { color: var(--red); }

/* ─── Usage card ─── */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 700px) { .usage-grid { grid-template-columns: repeat(2, 1fr); } }
.usage-kpi {
  background: var(--panel-2);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}
.usage-kpi .lbl { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.usage-kpi .val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.usage-kpi .val.warn { color: var(--amber); }
.usage-kpi .val.error { color: var(--red); }
.usage-kpi .val.good { color: var(--green); }
.budget-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.budget-bar {
  height: 8px;
  background: var(--panel-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.budget-bar > span {
  display: block;
  height: 100%;
  background: var(--green);
  transition: width 0.4s ease;
}
.budget-bar > span.warn { background: var(--amber); }
.budget-bar > span.error { background: var(--red); }
.usage-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 900px) { .usage-charts { grid-template-columns: 1fr; } }
#usage-by-agent {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  max-height: 160px;
  overflow-y: auto;
}
#usage-by-agent .agent-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
}
#usage-by-agent .agent-row .name { font-weight: 600; }
#usage-by-agent .agent-row .nums { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#usage-by-agent .agent-row .cost { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ─── Claude Code tasks ─── */
.ct-summary {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.ct-total,
.ct-breakdown {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.ct-total strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.ct-total span { font-size: 11px; }
.ct-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-content: flex-start;
}
.ct-breakdown strong { color: var(--text); }
.ct-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ct-row {
  display: grid;
  grid-template-columns: 64px 52px minmax(86px, 130px) 56px 1fr 54px;
  gap: 8px;
  padding: 7px 8px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  align-items: center;
}
.ct-model {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ct-toggle {
  align-self: flex-start;
  margin-top: 6px;
}
@media (max-width: 900px) {
  .ct-summary { grid-template-columns: 1fr; }
  .ct-row {
    grid-template-columns: 64px 48px 1fr 48px;
  }
  .ct-row .ct-model { display: none; }
  .ct-row > span:nth-child(5) { grid-column: 1 / -1; }
  .ct-row > span:nth-child(6) { text-align: left !important; }
}

/* ─── Bots Telegram ─── */
.telegram-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; margin-top: 12px; }
.tg-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.tg-card.ok { border-left: 3px solid #29b6f6; }
.tg-card.err { border-left: 3px solid var(--red); }
.tg-card .name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.tg-card .username { font-family: ui-monospace, monospace; font-size: 12px; color: #29b6f6; }
.tg-card .meta { color: var(--muted); font-size: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
.tg-card .meta span { display: inline-flex; align-items: center; gap: 4px; }
.tg-card .badge {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
}
.tg-card .source-tag {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(108,196,255,0.12);
  border-radius: 4px;
  font-size: 10px;
  margin-right: 4px;
}
.tg-card .webhook-info { font-size: 11px; color: var(--muted); }
.tg-card .webhook-info.has-pending { color: var(--amber); }
.tg-card .webhook-info.has-error { color: var(--red); }
.tg-card a { color: #29b6f6; text-decoration: none; font-size: 11px; }
.tg-card a:hover { text-decoration: underline; }

/* ─── Hierarquia (árvore) ─── */
.hier-tree { margin-top: 12px; font-size: 13px; }
.hier-node { position: relative; padding: 4px 0 4px 0; }
.hier-children {
  margin-left: 22px;
  padding-left: 18px;
  border-left: 1px dashed var(--border);
  position: relative;
}
.hier-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel-2);
  border-radius: 8px;
  border: 1px solid var(--border);
  position: relative;
}
.hier-row.alive { border-color: rgba(69,210,138,0.30); }
.hier-row.dead { border-color: rgba(255,94,107,0.30); opacity: 0.7; }
.hier-row.root { background: linear-gradient(135deg, rgba(108,196,255,0.18), rgba(154,140,255,0.18)); border-color: var(--accent); padding: 8px 14px; }
.hier-row.iface { background: rgba(255,180,84,0.12); border-color: rgba(255,180,84,0.30); }
.hier-row .icon { font-size: 16px; line-height: 1; }
.hier-row .text { display: flex; flex-direction: column; gap: 1px; }
.hier-row .title { font-weight: 600; font-size: 13px; }
.hier-row .meta { color: var(--muted); font-size: 10px; }
.hier-row .role { color: var(--muted); font-size: 11px; margin-left: 4px; max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hier-row .pid { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; margin-left: 4px; }
.hier-row .status-dot { width: 8px; height: 8px; border-radius: 50%; }
.hier-row .status-dot.alive { background: var(--green); box-shadow: 0 0 5px var(--green); }
.hier-row .status-dot.dead { background: var(--red); }
.hier-row .status-dot.unknown { background: var(--grey); }
.hier-children::before {
  content: "";
  position: absolute;
  left: 0; top: -4px; height: 0;
}
.hier-connector {
  position: absolute;
  left: -18px;
  top: 18px;
  width: 18px;
  height: 1px;
  background: var(--border);
}

/* ---- Uso do plano (subscrição) ---- */
.plan-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.plan-bar-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin-bottom: 5px; }
.plan-lbl { color: var(--text); }
.plan-pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.plan-track { height: 9px; border-radius: 6px; background: #1b2029; overflow: hidden; }
.plan-fill { display: block; height: 100%; border-radius: 6px; background: var(--accent); transition: width .45s ease; }
.plan-fill.warn { background: #ffb454; }
.plan-fill.crit { background: #ff5d5d; }

/* ---- Breakdowns "no que gasto" (por projecto/modelo/máquina/dia) ---- */
.ct-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.bd-block { background: #14181f; border: 1px solid var(--border, #232936); border-radius: 10px; padding: 12px 14px; }
.bd-title { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 10px; letter-spacing: .02em; }
.bd-row { display: grid; grid-template-columns: minmax(0,1fr) 70px 52px 52px; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.bd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-family: ui-monospace, monospace; font-size: 11.5px; }
.bd-bar { height: 6px; border-radius: 4px; background: #222733; overflow: hidden; }
.bd-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bd-tok { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.bd-cost { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }

/* ---- Projeção + histórico da quota ---- */
.plan-proj { color: var(--accent); font-size: 11px; font-weight: 600; margin: 0 auto 0 10px; white-space: nowrap; }
.plan-bar-head { gap: 4px; }
.plan-history-wrap { margin-top: 16px; border-top: 1px solid var(--border, #232936); padding-top: 12px; }
.plan-history-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.plan-history-head .controls { display: flex; gap: 4px; }
.plan-history-head .btn { padding: 2px 8px; font-size: 11px; }

/* ---- Botão matar processo ---- */
.worker { display: flex; align-items: center; gap: 8px; }
.worker .label { flex: 1; min-width: 0; }
.worker-kill { margin-left: 6px; padding: 1px 8px; border-radius: 6px; border: 1px solid #5a2a2a; background: #2a1818; color: #ff8a8a; cursor: pointer; font-size: 12px; line-height: 1.5; }
.worker-kill:hover { background: #ff5d5d; color: #fff; border-color: #ff5d5d; }

/* ===================== MOBILE (telemóvel) ===================== */
@media (max-width: 640px) {
  main { padding: 10px; gap: 10px; grid-template-columns: 1fr; }
  header { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  header h1 { font-size: 15px; }
  #compose-bar, #suggestions-bar { padding: 0 12px; }
  #compose-form { flex-wrap: wrap; gap: 6px; }
  #compose-input { flex: 1 1 100%; min-width: 0; }
  #compose-form select, #compose-form .btn { flex: 1 1 auto; }
  .card { padding: 12px; }
  /* Breakdowns e grelhas a 1 coluna */
  .ct-breakdowns { grid-template-columns: 1fr; gap: 10px; }
  .bd-row { grid-template-columns: minmax(0,1fr) 56px 46px 46px; gap: 6px; }
  .overview-grid { grid-template-columns: 1fr 1fr; }
  /* Barras do plano: deixar a projeção quebrar para baixo em vez de transbordar */
  .plan-bar-head { flex-wrap: wrap; }
  .plan-proj { margin: 0; flex-basis: 100%; order: 3; }
  .plan-history-head .btn { padding: 4px 12px; }
  /* Alvos de toque maiores */
  .worker-kill { padding: 4px 12px; font-size: 14px; }
  .worker { flex-wrap: wrap; }
  .btn { min-height: 30px; }
  /* Tabelas densas → permitir scroll horizontal se preciso */
  .ct-row, .session-row, .sync-row { font-size: 11px; }
}

/* ---- Terminais & chat ---- */
.term-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.term-machines { display: flex; gap: 4px; }
.term-modes { display: flex; gap: 4px; margin-left: auto; }
.btn.term-mac.active { background: var(--accent); color: #0b0e13; border-color: var(--accent); font-weight: 600; }
.btn[data-term-mode].active { background: #1f2733; border-color: var(--accent); color: var(--accent); }
.term-pane { border: 1px solid var(--border, #232936); border-radius: 8px; overflow: hidden; background: #0b0e13; }
#term-xterm { height: 360px; padding: 6px 8px; }
.term-chat-log { height: 320px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.term-chat-msg { padding: 7px 11px; border-radius: 8px; max-width: 85%; white-space: pre-wrap; word-break: break-word; }
.term-chat-msg.user { align-self: flex-end; background: #1f3a2e; }
.term-chat-msg.bot { align-self: flex-start; background: #1a1f29; font-family: ui-monospace, monospace; }
.term-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border, #232936); }
.term-chat-form input { flex: 1; }
@media (max-width: 640px) {
  .term-modes { margin-left: 0; }
  #term-xterm { height: 300px; }
}

/* ---- Agora: burn rate + agentes ativos ---- */
.live-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.live-kpi { background: #14181f; border: 1px solid var(--border, #232936); border-radius: 10px; padding: 10px 12px; }
.live-kpi .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.live-kpi .val { font-size: 22px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.live-kpi .sub { font-size: 10px; margin-top: 1px; }
.live-agents { display: flex; flex-direction: column; gap: 5px; }
.live-agent { display: grid; grid-template-columns: 10px 56px 1fr 90px 110px 60px; align-items: center; gap: 8px; padding: 5px 8px; background: var(--panel-2, #14181f); border-radius: 6px; font-size: 12px; }
.live-agent .la-proj { font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-agent .la-tok { text-align: right; font-variant-numeric: tabular-nums; }
.live-agent .la-ago { text-align: right; }
@media (max-width: 640px) {
  .live-kpis { grid-template-columns: 1fr 1fr; }
  .live-agent { grid-template-columns: 10px 1fr 70px; }
  .live-agent .la-host, .live-agent .la-model, .live-agent .la-ago { display: none; }
}

/* ---- Atividade do bot AI ---- */
.bot-activity-line { margin: 8px 0; }
.ba-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 8px 12px; background: #14181f; border: 1px solid var(--border, #232936); border-radius: 8px; font-size: 12px; }
.ba-inner.stale { border-color: #5a4420; }
.ba-bot { font-weight: 600; color: var(--accent); }
.ba-warn { color: #ffb454; }

/* ---- Regras por máquina ---- */
.rules-toolbar { margin: 10px 0; }
.rules-editor { display: flex; flex-direction: column; gap: 12px; }
.rules-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1; }
.rules-field textarea, .rules-field select { width: 100%; background: #14181f; border: 1px solid var(--border, #232936); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; }
.rules-field textarea { font-family: ui-monospace, monospace; }
.rules-row { display: flex; gap: 14px; flex-wrap: wrap; }
.rules-check { display: flex; align-items: center; gap: 6px; font-size: 13px; align-self: flex-end; padding-bottom: 8px; }
.rules-actions { display: flex; gap: 12px; align-items: center; }
@media (max-width: 640px) { .rules-row { flex-direction: column; } }

/* ---- Dica do terminal vazio ---- */
.term-hint { color: var(--muted); font-size: 13px; padding: 24px; text-align: center; cursor: pointer; line-height: 1.6; }
.term-hint strong { color: var(--accent); }

/* ---- Card de capacidades ---- */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; }
.cap-group { display: flex; flex-direction: column; gap: 6px; }
.cap-title { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 4px; letter-spacing: .02em; }
.cap-item { display: block; font-size: 12px; color: var(--text); text-decoration: none; padding: 6px 10px; background: #14181f; border: 1px solid var(--border, #232936); border-radius: 7px; transition: border-color .15s, background .15s; }
.cap-item:hover { border-color: var(--accent); background: #1a212c; }
/* ---- Badge de estado do terminal ---- */
.term-status { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }

/* ---- Chat estilo Messenger por máquina ---- */
.chat-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border, #232936); background: #10141b; }
.chat-header-title { font-size: 13px; font-weight: 600; }
.chat-header .btn { padding: 3px 10px; font-size: 11px; }
.term-chat-log { height: 340px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 3px; background: #0d1015; }
.chat-empty { color: var(--muted); font-size: 12px; text-align: center; margin: auto; padding: 20px; }
.chat-row { display: flex; flex-direction: column; max-width: 78%; margin-bottom: 6px; }
.chat-row.user { align-self: flex-end; align-items: flex-end; }
.chat-row.bot, .chat-row.err { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: 8px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chat-bubble.user { background: #2563eb; color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.bot { background: #262d3a; color: var(--text); border-bottom-left-radius: 4px; }
.chat-bubble.err { background: #3a1d1d; color: #ff9a9a; border-bottom-left-radius: 4px; }
.chat-time { font-size: 10px; color: var(--muted); margin: 2px 6px 0; }
.chat-bubble.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.chat-bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: #8a91a0; animation: chatdot 1.2s infinite ease-in-out; }
.chat-bubble.typing span:nth-child(2) { animation-delay: .2s; }
.chat-bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chatdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ─── Anexos dentro das bolhas do chat ─── */
.chat-bubble.has-attach { padding: 8px; }
.chat-bubble-text { padding: 0 5px; }
.chat-bubble.has-attach .chat-bubble-text { padding: 2px 6px 6px; }
.chat-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.chat-attach-imgwrap { display: block; line-height: 0; border-radius: 10px; overflow: hidden; max-width: 320px; cursor: zoom-in; }
.chat-attach-img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; background: #0b0f17; }
.chat-attach-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.08); color: inherit; text-decoration: none; font-size: 12.5px; }
.chat-bubble.user .chat-attach-link { background: rgba(255,255,255,.18); }
.chat-attach-link:hover { background: rgba(255,255,255,.16); }
.chat-attach-icon { font-size: 14px; }
.chat-attach-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-size { opacity: .65; font-size: 11px; }

/* ─── Rentabilizar quota (render tokens) ─── */
.rt-window { margin-top: 10px; }
.rt-window-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-stat {
  flex: 1; min-width: 90px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.rt-stat-lbl { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.rt-stat-val { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.rt-stat.warn { border-color: rgba(255,180,84,0.45); }
.rt-stat.warn .rt-stat-val { color: var(--amber); }
.rt-stat.crit { border-color: rgba(255,94,107,0.5); }
.rt-stat.crit .rt-stat-val { color: var(--red); }
.rt-stat.ok .rt-stat-val { color: var(--green); }

.rt-focus-row { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 4px; }
.rt-focus-row input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.rt-focus-row input:focus { border-color: var(--accent); }

.rt-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.rt-tier {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.rt-tier.rt-eco { border-top: 3px solid var(--green); }
.rt-tier.rt-balanced { border-top: 3px solid var(--accent); }
.rt-tier.rt-max { border-top: 3px solid var(--amber); }
.rt-tier-head { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.rt-tier-emoji { font-size: 18px; }
.rt-tier-blurb { font-size: 11px; line-height: 1.4; flex: 1; }
.rt-tier-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.rt-pill {
  font-size: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.rt-pill.muted { color: var(--muted); }
.rt-run { width: 100%; margin-top: 2px; cursor: pointer; }
.rt-run:disabled { opacity: 0.6; cursor: wait; }
/* ---- Dock de chat flutuante (Messenger) ---- */
.chat-dock { position: fixed; right: 20px; bottom: 0; width: 340px; max-width: calc(100vw - 24px); z-index: 1000; box-shadow: 0 8px 32px rgba(0,0,0,.5); border-radius: 12px 12px 0 0; overflow: hidden; border: 1px solid var(--border, #232936); border-bottom: none; }
.chat-dock-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #2563eb; color: #fff; cursor: pointer; user-select: none; }
.chat-dock-bar .dock-title { font-size: 13px; font-weight: 600; }
.dock-bar-actions { display: flex; gap: 4px; }
.dock-bar-actions button { background: rgba(255,255,255,.15); border: none; color: #fff; width: 26px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.dock-bar-actions button:hover { background: rgba(255,255,255,.3); }
.chat-dock-body { background: #0d1015; }
.chat-dock.minimized .chat-dock-body { display: none; }
.chat-dock.minimized { width: 240px; }
.dock-tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border, #232936); background: #10141b; }
.dock-tab { flex: 1; background: #1a1f29; border: 1px solid var(--border, #232936); color: var(--muted); border-radius: 6px; padding: 4px 6px; font-size: 11px; cursor: pointer; }
.dock-tab.active { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }
.chat-dock #dock-log { height: 300px; }
.chat-dock .term-chat-form { background: #10141b; }
@media (max-width: 640px) { .chat-dock { right: 0; width: 100vw; max-width: 100vw; border-radius: 12px 12px 0 0; } .chat-dock.minimized { width: 100vw; } }

/* ===== Janelas flutuantes por máquina (chat + terminal) ===== */
.launcher-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.launcher-btn { font-size: 13px; }
#mwin-dock { position: fixed; right: 16px; bottom: 0; z-index: 1000; display: flex; align-items: flex-end; gap: 12px; max-width: 100vw; }
.mwin { width: 330px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; background: #0d1015; border: 1px solid var(--border, #232936); border-bottom: none; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.mwin-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #2563eb; color: #fff; cursor: pointer; user-select: none; }
.mwin-title { font-size: 12.5px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwin-tabs { display: flex; gap: 3px; }
.mwin-tab { background: rgba(255,255,255,.14); border: none; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
.mwin-tab.active { background: #fff; color: #2563eb; font-weight: 600; }
.mwin-actions { display: flex; gap: 2px; }
.mwin-ico { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 14px; width: 22px; height: 22px; border-radius: 5px; line-height: 1; }
.mwin-ico:hover { background: rgba(255,255,255,.25); }
.mwin.minimized .mwin-body { display: none; }
.mwin.minimized { width: 220px; }
.mwin-log { height: 300px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 3px; background: #0d1015; }
.mwin-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border, #232936); background: #10141b; }
.mwin-input { flex: 1; background: #1a1f29; border: 1px solid var(--border, #232936); border-radius: 16px; color: var(--text); padding: 7px 12px; font-size: 13px; outline: none; }
.mwin-input:focus { border-color: var(--accent); }
.mwin-form .btn { border-radius: 50%; width: 34px; padding: 0; }
.mwin-xterm { height: 320px; padding: 6px 8px; background: #0b0e13; }
@media (max-width: 640px) { #mwin-dock { right: 0; gap: 4px; overflow-x: auto; } .mwin { width: 90vw; } .mwin.minimized { width: 60vw; } }

/* launcher: botão por máquina + novo terminal */
.launcher-grp { display: inline-flex; gap: 0; }
.launcher-grp .launcher-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.launcher-grp .launcher-term { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; padding: 6px 9px; font-size: 12px; }

/* terminais existentes por máquina */
.existing-terminals { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.et-host { background: #14181f; border: 1px solid var(--border, #232936); border-radius: 8px; padding: 8px 12px; }
.et-host-title { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.et-tmux-row { display: flex; flex-wrap: wrap; gap: 6px; }
.et-tmux { background: #16361f; border: 1px solid #2c6e3f; color: #9fe6b6; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: ui-monospace, monospace; }
.et-tmux:hover { background: #1d4a2a; }
.et-shells { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.et-shell { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--muted); background: #1a1f29; border-radius: 4px; padding: 1px 6px; }

/* maximizar janela + dock responsivo */
#mwin-dock { max-width: 100vw; overflow-x: auto; padding-left: 8px; }
.mwin { flex: 0 0 auto; }
.mwin-actions { display: flex; gap: 1px; }
.mwin.maximized { position: fixed; inset: 2vh 2vw 0 2vw; width: auto !important; max-width: none; z-index: 1100; }
.mwin.maximized .mwin-body { flex: 1; min-height: 0; display: flex; }
.mwin-chat, .mwin-term { flex-direction: column; }
.mwin.maximized .mwin-chat, .mwin.maximized .mwin-term { flex: 1 1 auto; min-height: 0; }
.mwin.maximized .mwin-log, .mwin.maximized .mwin-xterm { flex: 1 1 auto; height: auto; min-height: 0; }
@media (max-width: 760px) {
  #mwin-dock { right: 0; left: 0; max-width: 100vw; }
  .mwin { width: 94vw; max-width: 94vw; }
  .mwin.minimized { width: 70vw; }
  .mwin.maximized { inset: 0; }
}

/* botão terminal GUI */
.et-host-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.et-gui { font-size: 11px; padding: 3px 9px; }

/* fila por chat (strip na janela) */
.mwin-queue { display: none; flex-wrap: wrap; gap: 5px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--border, #232936); background: #10141b; }
.mq-count { font-size: 11px; color: var(--accent); font-weight: 600; }
.mq-item { font-size: 10.5px; color: var(--muted); background: #1a1f29; border-radius: 5px; padding: 1px 4px 1px 7px; display: inline-flex; align-items: center; gap: 3px; font-family: ui-monospace, monospace; }
.mq-del { background: transparent; border: none; color: #ff8a8a; cursor: pointer; font-size: 12px; padding: 0 2px; }
/* fila global */
.taskq-form { display: flex; gap: 8px; margin: 12px 0; }
.taskq-form input { flex: 1; background: #14181f; border: 1px solid var(--border, #232936); border-radius: 8px; color: var(--text); padding: 9px 12px; font-size: 13px; outline: none; }
.taskq-form input:focus { border-color: var(--accent); }
.taskq-log { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.tq-line { display: flex; gap: 10px; font-size: 12px; padding: 4px 8px; background: var(--panel-2, #14181f); border-radius: 6px; }
.tq-host { color: var(--accent); font-weight: 600; white-space: nowrap; }
.tq-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* visão / planeador */
.taskq-vision { margin: 12px 0; padding: 12px; background: #14181f; border: 1px solid var(--border, #232936); border-radius: 10px; }
.taskq-vision textarea { width: 100%; background: var(--bg, #0f1115); border: 1px solid var(--border, #232936); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 13px; margin-top: 4px; resize: vertical; }
.taskq-vision-row { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.taskq-vision-row #vision-count { width: 60px; background: var(--bg, #0f1115); border: 1px solid var(--border, #232936); border-radius: 8px; color: var(--text); padding: 6px 8px; }
.plan-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.plan-item { display: flex; gap: 8px; font-size: 12px; padding: 5px 8px; background: var(--panel-2, #14181f); border: 1px solid var(--border, #232936); border-radius: 6px; }
.plan-n { color: var(--accent); font-weight: 700; min-width: 16px; }
.plan-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

/* ─── Section nav (sticky tabs) ──────────────────────────────────────── */
.section-nav {
  grid-column: 1/-1;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(15, 17, 21, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
.section-nav .nav-btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.section-nav .nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.section-nav .nav-btn.active {
  background: var(--accent);
  color: #0f1115;
  border-color: var(--accent);
  font-weight: 600;
}
.section-nav .nav-btn span { font-size: 12px; }
.section-nav .nav-more {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  position: relative;
}
.section-nav .nav-more summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  user-select: none;
}
.section-nav .nav-more summary::-webkit-details-marker { display: none; }
.section-nav .nav-more summary:hover { color: var(--accent); border-color: var(--accent); }
.section-nav .nav-more[open] summary { background: var(--panel-2); color: var(--text); }
.section-nav .nav-more[open] .cap-grid {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  min-width: 320px;
  max-width: min(720px, calc(100vw - 48px));
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  z-index: 30;
}

/* ─── Divisores de grupo ─────────────────────────────────────────────── */
.group-row {
  grid-column: 1/-1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 6px 4px;
  margin-top: 6px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 72px;
}
.group-row .group-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}
.group-row .group-hint {
  font-size: 11px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* scroll-margin para os cards (compensa nav sticky) */
main > section[data-group] { scroll-margin-top: 70px; }


/* fila server-side */
.tq-task { background: var(--panel-2, #14181f); border: 1px solid var(--border, #232936); border-radius: 7px; padding: 6px 10px; margin-bottom: 4px; }
.tq-task.tq-running { border-color: #2c6e3f; }
.tq-task.tq-error { border-color: #5a2a2a; }
.tq-task-head { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.tq-badge { width: 16px; text-align: center; }
.tq-task .tq-host { color: var(--accent); font-weight: 600; white-space: nowrap; }
.tq-task .tq-txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq-mini { background: transparent; border: 1px solid var(--border, #232936); color: var(--muted); border-radius: 5px; cursor: pointer; font-size: 11px; padding: 0 6px; }
.tq-result { margin-top: 5px; font-size: 11px; }
.tq-result summary { cursor: pointer; color: var(--muted); }
.tq-result pre { white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; background: #0d1015; padding: 8px; border-radius: 6px; margin-top: 4px; font-size: 11px; }

/* mural de pré-visualizações de terminais ao vivo */
.et-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 6px; }
.et-preview { background: #0b0e13; border: 1px solid var(--border, #232936); border-radius: 8px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.et-preview:hover { border-color: var(--accent); }
.et-preview-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 9px; background: #14181f; font-size: 11px; }
.et-preview-name { color: var(--accent); font-weight: 600; font-family: ui-monospace, monospace; }
.et-preview-open { color: var(--muted); }
.et-preview-body { margin: 0; padding: 8px 9px; font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; line-height: 1.3; color: #c8ccd4; white-space: pre; overflow: hidden; max-height: 150px; }
@media (max-width: 640px) { .et-previews { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   SHELL CRM — sidebar (desktop) + bottom-nav (mobile) + PWA + mobile chat
   (sessão B; não toca em .rt-* / render-tokens)
   ════════════════════════════════════════════════════════════════════════ */
:root { --sb-w: 232px; --bn-h: 60px; }

/* [hidden] tem de vencer regras de classe com display explícito (badges, etc.) */
[hidden] { display: none !important; }

/* views: só o grupo ativo aparece (JS faz o toggle via style.display). overview fica sempre. */
.section-nav { display: none !important; } /* substituída pela sidebar */

/* ─── Sidebar ─── */
#sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb-w);
  background: #12151c; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; padding: 14px 12px;
  z-index: 1200; transition: transform .22s ease;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.sb-logo { width: 38px; height: 38px; border-radius: 10px; }
.sb-brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.sb-brand-txt strong { font-size: 15px; }
.sb-brand-txt span { font-size: 11px; color: var(--muted); }
.sb-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sb-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: none; border-left: 3px solid transparent;
  color: var(--text); font-size: 13.5px; font-weight: 500;
  padding: 11px 12px; border-radius: 9px; cursor: pointer;
}
.sb-item:hover { background: var(--panel-2); }
.sb-item.active { background: rgba(108,196,255,0.14); color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.sb-item .sb-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.sb-foot { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); padding: 10px 8px 4px; border-top: 1px solid var(--border); }
#sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1150; }

/* hambúrguer + bottom-nav só em mobile */
#menu-toggle { display: none; background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 18px; width: 38px; height: 38px; border-radius: 9px; cursor: pointer; margin-right: 6px; }
#bottomnav { display: none; }

/* desktop: empurra o conteúdo para a direita da sidebar */
@media (min-width: 901px) {
  body { padding-left: var(--sb-w); }
  #mwin-dock { left: var(--sb-w); }
}

/* ─── Mobile: sidebar vira drawer, aparece bottom-nav ─── */
@media (max-width: 900px) {
  #menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  #sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.6); width: min(82vw, 300px); }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open #sidebar-backdrop { display: block; }
  header { position: sticky; top: 0; z-index: 1100; background: var(--bg); padding: 12px 14px; }
  header h1 { font-size: 15px; }
  main { padding: 12px 12px calc(var(--bn-h) + env(safe-area-inset-bottom, 0px) + 20px); gap: 12px; }
  #compose-bar, #suggestions-bar { padding-left: 12px; padding-right: 12px; }
  /* limita stack de erros — antes empurrava compose-bar contra bottom-nav */
  #suggestions-bar { max-height: 28vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  #bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--bn-h) + env(safe-area-inset-bottom, 0px));
    background: rgba(18,21,28,0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--border);
    z-index: 1180; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; position: relative;
    -webkit-appearance: none; appearance: none; touch-action: manipulation; user-select: none;
    -webkit-tap-highlight-color: rgba(108,196,255,0.18);
    min-height: 44px; padding: 0;
  }
  .bn-item > * { pointer-events: none; }
  .bn-item span { font-size: 9.5px; font-weight: 600; }
  .bn-item.active { color: var(--accent); }
  .bn-item:active { background: rgba(108,196,255,0.12); }
  .bn-badge { position: absolute; top: 5px; right: 50%; transform: translateX(16px); background: var(--red); color: #fff; min-width: 15px; height: 15px; border-radius: 8px; font-size: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; }
}

/* ─── Agregador de conversas (Messenger) ─── */
.conv-inbox { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.conv-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #14181f; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.conv-row:hover { border-color: var(--accent); background: #171c24; }
.conv-av { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: #1f2530; flex: none; }
.conv-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #14181f; }
.conv-dot.online { background: var(--green); } .conv-dot.offline { background: var(--grey); } .conv-dot.busy { background: var(--amber); }
.conv-main { flex: 1; min-width: 0; }
.conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conv-name { font-weight: 600; font-size: 13.5px; }
.conv-time { font-size: 11px; color: var(--muted); flex: none; }
.conv-snippet { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; font-family: ui-monospace, Menlo, monospace; }
.conv-row.has-unread .conv-name::after { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.conv-go { color: var(--muted); font-size: 18px; flex: none; }

/* ─── Mobile: chat em ecrã inteiro (estilo app) ─── */
@media (max-width: 760px) {
  #mwin-dock { right: 0; left: 0; bottom: 0; padding: 0; gap: 0; overflow: visible; }
  .mwin { position: fixed; inset: 0 0 0 0; width: 100vw !important; max-width: 100vw; height: 100dvh; border-radius: 0; border: none; z-index: 1300; }
  .mwin-body { flex: 1; min-height: 0; display: flex; }
  .mwin-chat, .mwin-term { flex: 1 1 auto; min-height: 0; }
  .mwin-log { height: auto; flex: 1 1 auto; min-height: 0; padding: 14px; }
  .mwin-xterm { height: auto; flex: 1 1 auto; min-height: 0; }
  .mwin-bar { padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); }
  .mwin-input { font-size: 16px; padding: 11px 14px; } /* 16px evita zoom no iOS */
  .mwin-form { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .mwin.minimized { display: none; } /* reabre pela caixa de Conversas */
  .mwin.maximized { inset: 0; }
}

/* ── M2: pílula de veredicto da frota (header) ── */
.verdict { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.verdict:hover { border-color: var(--accent); }
.verdict .vd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grey); flex: none; }
.verdict.good { background: rgba(69,210,138,0.10); border-color: rgba(69,210,138,0.4); color: var(--green); }
.verdict.good .vd-dot { background: var(--green); box-shadow: 0 0 6px rgba(69,210,138,.7); }
.verdict.warn { background: rgba(255,180,84,0.10); border-color: rgba(255,180,84,0.4); color: var(--amber); }
.verdict.warn .vd-dot { background: var(--amber); box-shadow: 0 0 6px rgba(255,180,84,.7); }
.verdict.bad { background: rgba(255,94,107,0.12); border-color: rgba(255,94,107,0.5); color: var(--red); }
.verdict.bad .vd-dot { background: var(--red); box-shadow: 0 0 7px rgba(255,94,107,.8); animation: vd-pulse 1.4s ease-in-out infinite; }
@keyframes vd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 560px) { .verdict { padding: 6px 10px; } .verdict .vd-txt { font-size: 11px; } header h1 { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .verdict.bad .vd-dot { animation: none; } }

/* ── M3: banner de ligação + obsolescência ── */
#conn-banner { position: sticky; top: 0; z-index: 1190; background: rgba(255,94,107,0.16); color: var(--red); border-bottom: 1px solid rgba(255,94,107,0.4); text-align: center; font-size: 12px; font-weight: 600; padding: 7px 12px; }
body.conn-stale main { opacity: .72; transition: opacity .2s; }
body.conn-stale .verdict { filter: grayscale(.5); }
@media (min-width: 901px) { #conn-banner { left: var(--sb-w); position: sticky; } }

/* ── M4: acessibilidade — foco visível por teclado + movimento reduzido ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mwin:focus { outline: none; } /* o diálogo recebe foco mas não precisa de anel */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── M5: compose progressiva no mobile (só input+enviar; resto atrás de ⚙) ── */
#compose-opts-toggle { display: none; }
@media (max-width: 760px) {
  #compose-opts-toggle { display: inline-flex; }
  #compose-target, #compose-model, .batch-toggle, #force-sync-btn, #notify-test-btn { display: none; }
  #compose-bar.opts-open #compose-target,
  #compose-bar.opts-open #compose-model,
  #compose-bar.opts-open .batch-toggle,
  #compose-bar.opts-open #force-sync-btn,
  #compose-bar.opts-open #notify-test-btn { display: inline-flex; }
  #compose-form { gap: 6px; flex-wrap: wrap; }
  #compose-input { flex: 1 1 auto; min-width: 0; font-size: 16px; } /* 16px = sem zoom iOS */
}

/* ── M7: ajuda colapsável + densidade ── */
.help-text { overflow: hidden; transition: max-height .22s ease, opacity .2s, margin .2s; max-height: 400px; }
.help-text.help-collapsed { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; }
.help-toggle { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 4px; margin-left: 6px; vertical-align: middle; }
.help-toggle:hover { color: var(--accent); }
.card h2 .help-toggle { text-transform: none; } /* o ⓘ não herda o uppercase do h2 */

/* ── M6: ênfase de conversa não-lida ── */
.conv-row.has-unread { border-color: rgba(108,196,255,0.4); background: #161c26; }
.conv-row.has-unread .conv-name { font-weight: 700; }
.conv-row.has-unread .conv-snippet { color: var(--text); font-weight: 600; }

/* ── M8: transição de vista + skeletons + pull-to-refresh ── */
@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.view-in { animation: view-in .18s ease both; }

.sk { background: linear-gradient(90deg, #1a1f29 25%, #232936 37%, #1a1f29 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease infinite; border-radius: 6px; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skeleton-kpi { gap: 8px; }
.sk-lbl { height: 10px; width: 50%; } .sk-val { height: 20px; width: 70%; } .sk-meta { height: 9px; width: 85%; }

#ptr-ind { position: fixed; top: 0; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--accent); background: rgba(15,17,21,.95); padding: 8px; transform: translateY(-100%); transition: transform .15s ease; z-index: 1185; pointer-events: none; }
#ptr-ind.show { transform: translateY(0); }
@media (min-width: 901px) { #ptr-ind { display: none; } } /* PTR só faz sentido no telemóvel */
@media (prefers-reduced-motion: reduce) { .view-in { animation: none; } .sk { animation: none; } }

/* ── Faixa da frota: quem está online + quem apanha a próxima tarefa ── */
.fleet-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 4px; }
.fleet-chip { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: #14181f; border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, background .15s; }
.fleet-chip .fleet-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grey); flex: none; }
.fleet-chip.on .fleet-dot { background: var(--green); box-shadow: 0 0 7px rgba(69,210,138,.7); }
.fleet-chip.load .fleet-dot { background: var(--amber); box-shadow: 0 0 7px rgba(255,180,84,.7); }
.fleet-chip.busy .fleet-dot { background: var(--accent); box-shadow: 0 0 7px rgba(108,196,255,.7); animation: vd-pulse 1.3s ease-in-out infinite; }
.fleet-chip.off { opacity: .6; }
.fleet-chip.off .fleet-dot { background: var(--red); }
.fleet-chip.next { border-color: var(--green); background: rgba(69,210,138,0.08); box-shadow: 0 0 0 1px rgba(69,210,138,.35) inset; }
.fleet-info { min-width: 0; }
.fleet-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.fleet-next-tag { font-size: 10px; font-weight: 700; color: var(--green); background: rgba(69,210,138,.15); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.fleet-busy-tag { font-size: 10px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.fleet-meta { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .fleet-chip.busy .fleet-dot { animation: none; } }

/* ── P&L · valor vs. custo da frota ── */
.pnl-headline { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.pnl-kpi { background: #14181f; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.pnl-kpi .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pnl-kpi .val { font-size: 22px; font-weight: 700; margin: 3px 0; font-variant-numeric: tabular-nums; }
.pnl-kpi .meta { font-size: 10.5px; color: var(--muted); }
.pnl-kpi.good .val { color: var(--green); }
.pnl-kpi.warn .val { color: var(--amber); }
.pnl-table { display: flex; flex-direction: column; gap: 2px; }
.pnl-row { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr 0.7fr; gap: 8px; padding: 8px 10px; font-size: 12.5px; align-items: center; background: var(--panel-2); border-radius: 6px; font-variant-numeric: tabular-nums; }
.pnl-row.pnl-head { background: transparent; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 2px 10px; }
.pnl-venture { font-weight: 600; color: var(--accent); }
.pnl-roi-good { color: var(--green); font-weight: 700; }
.pnl-roi-warn { color: var(--amber); font-weight: 700; }
.pnl-note { font-size: 11px; color: var(--muted); background: rgba(255,180,84,0.08); border: 1px solid rgba(255,180,84,0.3); border-radius: 8px; padding: 8px 11px; margin-top: 8px; line-height: 1.5; }
.pnl-ledger { display: flex; flex-direction: column; gap: 6px; }
.pnl-led-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }
.pnl-led-row.tagged { border-color: rgba(69,210,138,0.4); }
.pnl-led-txt { flex: 1 1 260px; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnl-led-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pnl-mini { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 7px; font-size: 11.5px; }
.pnl-val-in { width: 66px; }
.pnl-save { font-size: 11.5px; padding: 5px 10px; }
@media (max-width: 640px) {
  .pnl-row { grid-template-columns: 1.2fr 1fr 1fr; }
  .pnl-row span:nth-child(4), .pnl-row span:nth-child(5) { display: none; }
  .pnl-led-txt { flex-basis: 100%; }
}

/* ── Gestor autónomo da frota ── */
#mgr-objective { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 9px 11px; font-size: 13px; resize: vertical; margin-top: 4px; }
#mgr-objective:focus { border-color: var(--accent); outline: none; }
.mgr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.mgr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-left: auto; cursor: pointer; }
.mgr-reasoning { font-size: 12.5px; color: var(--text); background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 6px; padding: 8px 11px; margin-top: 10px; line-height: 1.5; }
.mgr-reasoning:empty { display: none; }
.mgr-escalations { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mgr-escal { background: rgba(255,180,84,0.08); border: 1px solid rgba(255,180,84,0.4); border-radius: 10px; padding: 10px 12px; }
.mgr-q { font-size: 13px; font-weight: 600; color: var(--amber); }
.mgr-why { font-size: 11.5px; margin-top: 3px; line-height: 1.4; }
.mgr-ans-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mgr-ans { flex: 1 1 200px; min-width: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); padding: 7px 10px; font-size: 12.5px; }
.mgr-ans:focus { border-color: var(--accent); outline: none; }
.mgr-dismiss { color: var(--muted); }
.mgr-log-wrap { margin-top: 10px; }
.mgr-log-wrap summary { font-size: 11px; color: var(--muted); cursor: pointer; }
.mgr-log { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.mgr-log-row { display: flex; gap: 8px; font-size: 11px; align-items: baseline; }
.mgr-log-t { flex: none; font-variant-numeric: tabular-nums; }
.mgr-log-k { flex: none; color: var(--accent); font-weight: 600; min-width: 64px; }
.mgr-log-row span:last-child { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Camada 3 · Motor de receita (conteúdo) ── */
.content-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.content-form select, .content-form input { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 7px 9px; font-size: 12.5px; }
#content-topic { flex: 1 1 260px; min-width: 0; }
#content-count { width: 56px; }
.content-list { display: flex; flex-direction: column; gap: 6px; }
.content-draft { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.content-draft.published { border-color: rgba(69,210,138,0.4); }
.content-draft summary { display: flex; align-items: center; gap: 9px; padding: 9px 11px; cursor: pointer; font-size: 12.5px; }
.content-draft summary::-webkit-details-marker { display: none; }
.cd-kind { flex: none; font-size: 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--accent); }
.cd-venture { flex: none; font-size: 11px; color: var(--muted); }
.cd-title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-pub-tag { flex: none; font-size: 10px; color: var(--green); font-weight: 700; }
.content-body { margin: 0; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--bg); white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.55; font-family: inherit; max-height: 420px; overflow-y: auto; color: var(--text); }
.cd-actions { display: flex; gap: 6px; padding: 8px 11px; border-top: 1px solid var(--border); }
.cd-mini { font-size: 11.5px; padding: 4px 10px; }
.cd-del { margin-left: auto; color: var(--muted); }

/* ── Agentes de trabalho configuráveis ── */
#taskq-agent { background: #14181f; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 8px; font-size: 12.5px; max-width: 170px; }
.agents-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ag-chip { display: inline-flex; align-items: center; gap: 7px; background: #14181f; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: border-color .15s; }
.ag-chip:hover { border-color: var(--accent); }
.ag-chip.off { opacity: .5; }
.ag-chip-ico { font-size: 15px; }
.ag-chip-name { font-size: 12.5px; font-weight: 600; }
.ag-chip-meta { font-size: 10px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 7px; }
.ag-chip-act { font-size: 10px; color: var(--amber); font-weight: 700; }
.agents-editor { background: #14181f; border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.agents-editor input, .agents-editor textarea, .agents-editor select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; width: 100%; }
.agents-editor textarea { resize: vertical; font-family: inherit; }
.agents-editor input:focus, .agents-editor textarea:focus, .agents-editor select:focus { border-color: var(--accent); outline: none; }
.ag-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.ag-row > * { flex: 1; }
.ag-row .rules-check { flex: none; }
.ag-icon { max-width: 56px; text-align: center; flex: none !important; }
.ag-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); flex: 1; }
.ag-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ag-actions .btn { flex: none; }
.ag-del-btn { color: var(--red); }
@media (max-width: 640px) { .ag-row { flex-direction: column; align-items: stretch; } #taskq-agent { max-width: none; } }

/* ════════════════════════════════════════════════════════════════════
   FIX RESPONSIVO — eliminar overflow horizontal no telemóvel
   (causa: flex/grid items com texto nowrap sem min-width:0 forçam a largura)
   ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { min-width: 0; }              /* deixa flex/grid items encolher */
html, body { max-width: 100%; overflow-x: clip; }     /* rede de segurança, sem partir sticky */
main { max-width: 100%; }
.card, section.card { max-width: 100%; overflow-wrap: break-word; }
img, pre, canvas, table, video, iframe { max-width: 100%; }
.section-head { flex-wrap: wrap; }
.section-head > h2 { min-width: 0; }
header { min-width: 0; }
header > div { min-width: 0; }
@media (max-width: 480px) {
  .overview-grid { grid-template-columns: 1fr 1fr; }   /* 2 cols cabem; conteúdo encolhe com min-width:0 */
  .fleet-strip { grid-template-columns: 1fr; }
  .pnl-headline { grid-template-columns: 1fr 1fr; }
  header { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; }
  header h1 { font-size: 14px; flex: 1 1 100%; order: -1; }
  .group-row { flex-wrap: wrap; }
  .group-row .group-hint { flex-basis: 100%; }
}
@media (max-width: 360px) {
  .overview-grid, .pnl-headline { grid-template-columns: 1fr; }
}

/* ── Botão do token admin (destrava ações via URL público) ── */
.admin-key { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; width: 34px; height: 32px; cursor: pointer; font-size: 14px; line-height: 1; opacity: .65; }
.admin-key:hover { border-color: var(--accent); opacity: 1; }
.admin-key.authed { border-color: var(--green); color: var(--green); opacity: 1; background: rgba(69,210,138,0.1); }

/* ── Botão instalar PWA ── */
.install-btn { background: var(--accent); color: #0b0e13; border: none; border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.install-btn:hover { filter: brightness(1.08); }

/* ── Modal do token admin (substitui prompt(), que não funciona em PWA) ── */
.admin-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.admin-modal-box { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.admin-modal-title { font-size: 16px; font-weight: 700; }
.admin-modal-sub { font-size: 12px; color: var(--muted); margin: 6px 0 12px; line-height: 1.4; }
#admin-modal-input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 11px 12px; font-size: 16px; font-family: ui-monospace, monospace; }
#admin-modal-input:focus { border-color: var(--accent); outline: none; }
.admin-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }