:root {
  --color-bg-app: #f7f9fc;
  --color-bg-surface: #ffffff;
  --color-bg-sidebar: #071426;
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-border: #e3e8f2;
  --color-accent: #0aa66f;
  --color-success: #027a48;
  --color-warning: #b54708;
  --color-danger: #b42318;
  --bg: #f7f9fc;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --line: #e3e8f2;
  --text: #0f172a;
  --muted: #64748b;
  --brand: #0aa66f;
  --brand-2: #1d4ed8;
  --danger: #b42318;
  --warn: #b54708;
  --ok: #027a48;
  --shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

/* V2.5.0 - templates, active conversations and consumption */
.page-heading-row,.action-row,.account-sync-row,.period-form,.template-counts{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.action-row{justify-content:flex-start}.action-row.compact{gap:6px}.action-row form,.account-sync-row form{margin:0}.btn.small{min-height:30px;padding:5px 9px;font-size:12px}.btn.ghost{background:transparent}.template-filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end;margin:16px 0}.account-sync-row{justify-content:flex-start;margin:0 0 12px}.table-panel{overflow-x:auto}.template-builder{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start;margin-top:16px}.template-steps{display:flex;flex-direction:column;gap:12px}.template-step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px}.step-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#17c99a;color:#07131d;font-weight:800}.step-content h2{margin:2px 0 14px}.form-grid{display:grid;gap:12px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.span-2{grid-column:1/-1}.form-grid label,.template-step label{display:flex;flex-direction:column;gap:6px}.form-grid small,.template-step small{color:var(--muted)}.button-editor{margin-top:14px}.button-editor-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px;margin-top:8px}.template-preview-panel{position:sticky;top:88px}.whatsapp-preview{margin-top:12px;padding:18px;background:#dcefe5;color:#14231d;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(10,60,40,.12)}.whatsapp-preview p{white-space:pre-wrap;line-height:1.55}.whatsapp-preview small{display:block;color:#53675e}.active-conversation-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;margin-top:16px}.active-conversation-form{display:flex;flex-direction:column;gap:12px}.metric-grid.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.consumption-grid,.diagnostic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.summary-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.summary-row:last-child{border-bottom:0}.cost-placeholder{margin-top:12px}.diagnostic-account{padding:14px;background:var(--panel-soft);border:1px solid var(--line);border-radius:8px}.field-error{color:#f08d8d;font-size:12px;margin-top:6px}.alert.danger{border:1px solid #8e3e4b;background:#311a22;color:#ffd9df;padding:12px;border-radius:8px;margin:12px 0}
@media(max-width:1100px){.template-builder,.active-conversation-layout{grid-template-columns:minmax(0,1fr)}.template-preview-panel{position:relative;top:auto}.consumption-grid,.diagnostic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.template-filters,.form-grid.two,.form-grid.three,.consumption-grid,.diagnostic-grid,.metric-grid.four{grid-template-columns:minmax(0,1fr)}.button-editor-row{grid-template-columns:minmax(0,1fr)}.template-step{grid-template-columns:minmax(0,1fr)}.period-form{align-items:stretch}.period-form input,.period-form button{width:100%}}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Inter", "Segoe UI", Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }

.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, #071426 0%, #0b1729 55%, #0f1d32 100%); color: #e4e7ec; padding: 22px 18px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; margin: 4px 8px 24px; color: #fff; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #0aa66f; color: #fff; }
.nav { flex: 1; }
.nav-section { margin: 18px 8px 8px; font-size: 11px; color: #7d8aa1; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 8px; color: #d6deeb; margin-bottom: 5px; font-weight: 700; }
.nav a:hover, .nav a.active { background: linear-gradient(90deg, rgba(10,166,111,.28), rgba(10,166,111,.14)); color: #fff; }
.nav a.active { box-shadow: inset 3px 0 0 #10b981; }
.sidebar-card { border: 1px solid rgba(148, 163, 184, .24); border-radius: 8px; padding: 14px; background: rgba(15, 23, 42, .55); margin-top: 14px; }
.sidebar-card .btn { width: 100%; margin-top: 10px; background: #0aa66f; border-color: #0aa66f; color: #fff; }
.current-client-card { border: 1px solid rgba(148, 163, 184, .22); border-radius: 8px; padding: 12px; color: #fff; margin-top: 12px; display: grid; gap: 4px; }
.current-client-card span { color: #7d8aa1; font-size: 12px; }

.main { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 30px;
  background: rgba(7, 12, 22, .92);
  border-bottom: 1px solid rgba(93, 116, 150, .28);
  backdrop-filter: blur(14px);
}
.topbar-context-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
}
.topbar-context-toggle svg { transition: transform .18s ease; transform: rotate(180deg); }
.topbar-compact-summary { display: none; min-width: 0; align-items: baseline; gap: 9px; }
.topbar-compact-summary strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.topbar-compact-summary span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
html.topbar-collapsed .topbar { min-height: 42px; padding-top: 5px; padding-bottom: 5px; justify-content: flex-start; }
html.topbar-collapsed .topbar-context-toggle svg { transform: rotate(0); }
html.topbar-collapsed .topbar-compact-summary { display: flex; }
html.topbar-collapsed .topbar-identity,
html.topbar-collapsed .topbar-actions { display: none; }
.topbar-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.topbar-field {
  display: grid;
  gap: 3px;
  min-width: 150px;
}
.topbar-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.topbar-field strong {
  color: #f7fbff;
  font-size: 13px;
  line-height: 1.25;
}
.company-field {
  min-width: 220px;
}
.company-field form {
  margin: 0;
}
.company-field select {
  height: 36px;
  min-width: 220px;
  padding: 7px 34px 7px 10px;
}
.content { padding: 26px 30px; max-width: 1740px; }

h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: 0; }
h2 { font-size: 18px; margin: 0 0 14px; }
h3 { font-size: 15px; margin: 0 0 10px; }
.muted { color: var(--muted); }
.eyebrow { display: inline-flex; margin-bottom: 8px; color: #0aa66f; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }

.grid { display: grid; gap: 16px; }
.grid.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.metrics.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-gap { margin-top: 16px; }
.between { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.lead-cell { display: flex; gap: 10px; align-items: flex-start; }
.channel-dot, .avatar-dot { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.channel-dot { width: 28px; height: 28px; border-radius: 8px; background: #eef2f7; color: #475467; }
.channel-dot.whatsapp { background: #dcfce7; color: #027a48; }
.channel-dot.instagram { background: #fdf2fa; color: #c11574; }
.channel-dot.site, .channel-dot.messenger { background: #eff8ff; color: #175cd3; }
.channel-dot.email { background: #f4f3ff; color: #5925dc; }
.avatar-dot { width: 30px; height: 30px; border-radius: 999px; background: #e2e8f0; color: #0f172a; font-size: 11px; font-weight: 800; }
.conversation-preview-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.conversation-preview-line span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.conversation-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.clickable-row, .clickable-card { cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.clickable-row:hover { background: #f8fafc; }
.clickable-row:hover .conversation-title, .clickable-card:hover .conversation-title { color: var(--brand); }
.clickable-card:hover { background: #f8fafc; border-color: #b7c6dc; transform: translateY(-1px); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: #fff; color: var(--text); border-radius: 8px; padding: 9px 13px; font-weight: 500; cursor: pointer; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: white; }
.btn.disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
.icon-btn { width: 42px; height: 42px; padding: 0; }

.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 3px; padding: 3px 7px; background: #1d4ed8; color: #fff; font-size: 11px; font-weight: 500; line-height: 1.2; }
.badge.ok { background: #027a48; color: #fff; }
.badge.warn { background: #b54708; color: #fff; }
.badge.danger { background: #b42318; color: #fff; }
.badge.dark { background: #475467; color: #fff; }
.badge.neutral { background: #e2e8f0; color: #0f172a; }
.channel-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 3px; padding: 3px 7px; font-size: 11px; font-weight: 500; line-height: 1.2; background: #475467; color: #fff; }
.channel-badge.whatsapp { background: #039855; color: #fff; }
.channel-badge.instagram { background: #c11574; color: #fff; }
.channel-badge.site { background: #175cd3; color: #fff; }
.channel-badge.messenger { background: #026aa2; color: #fff; }
.channel-badge.email { background: #5925dc; color: #fff; }
.pending-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.pin-marker { display: inline-flex; align-items: center; border-radius: 5px; padding: 3px 7px; background: #fff7ed; color: #9a3412; font-size: 11px; font-weight: 800; line-height: 1.2; }
.pin-action { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; }
.pin-action:hover { border-color: var(--brand); color: var(--brand); background: #f6fefc; }
.pin-action.active { background: #ecfdf3; border-color: #abefc6; color: #027a48; }

.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; margin-bottom: 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.dashboard-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.period-control { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: 280px; padding: 10px 12px; background: #fff; border: 1px solid #d8dee8; border-radius: 8px; }
.period-control strong { display: block; font-size: 13px; }
.period-control small { display: block; margin-top: 2px; color: var(--muted); }
.period-control select { width: 28px; height: 28px; color: var(--text); background: transparent; border: 0; cursor: pointer; }
.period-control option { color: var(--text); background: #fff; }

.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; min-height: 104px; box-shadow: var(--shadow); display: grid; align-content: space-between; }
.metric:hover { border-color: #b7c6dc; transform: translateY(-1px); }
.metric-top { display: flex; align-items: center; gap: 12px; }
.metric-icon { width: 50px; height: 50px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.metric-icon.green { background: #dcfce7; color: #0f9f66; }
.metric-icon.blue { background: #dbeafe; color: #2563eb; }
.metric-icon.amber { background: #fef3c7; color: #d97706; }
.metric-icon.purple { background: #ede9fe; color: #7c3aed; }
.metric-icon.red { background: #ffe4e6; color: #e11d48; }
.metric-icon.slate { background: #e8edf5; color: #475569; }
.metric .value { font-size: 30px; font-weight: 800; margin-top: 4px; }
.metric .hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.trend { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 7px; background: #dcfce7; color: #079455; }
.trend.negative { background: #fef3f2; color: #d92d20; }
.trend.neutral { background: #f1f5f9; color: #64748b; }

.dashboard-main-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); gap: 16px; margin-top: 16px; }
.dashboard-side-stack { display: grid; gap: 16px; }
.dashboard-intelligence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.signal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.priority-list { display: grid; gap: 10px; }
.priority-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.priority-item:last-child { border-bottom: 0; }
.priority-avatar { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #ecfdf3; color: #027a48; }
.priority-body strong { display: block; margin-bottom: 4px; }
.priority-body p { margin: 0 0 8px; color: #334155; }
.priority-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.attention-list { display: grid; gap: 10px; }
.attention-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.attention-item.high { border-color: #fecdca; background: #fffbfa; }
.attention-item.medium { border-color: #fedf89; background: #fffcf5; }
.attention-item .value { min-width: 36px; font-size: 22px; font-weight: 800; }

.executive-summary { display: grid; gap: 14px; }
.summary-facts { display: grid; gap: 10px; }
.summary-facts div { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.summary-facts span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }

.bar-list { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 1fr) 56px 48px; gap: 10px; align-items: center; }
.bar-track { height: 8px; border-radius: 999px; background: #edf2f7; overflow: hidden; grid-column: 1 / -1; }
.bar-fill { height: 100%; background: #0aa66f; border-radius: inherit; }

.signal-card { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: var(--panel-soft); display: grid; gap: 8px; }
.signal-card .metric-icon { width: 42px; height: 42px; }
.signal-card strong { display: block; font-size: 24px; margin-top: 4px; }

.inbox-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.conversation-workspace { --channel: #0aa66f; --channel-soft: #ecfdf3; --channel-bubble: #ecfdf3; --channel-line: #abefc6; }
.conversation-workspace.channel-whatsapp { --channel: #039855; --channel-soft: #ecfdf3; --channel-bubble: #ecfdf3; --channel-line: #abefc6; }
.conversation-workspace.channel-instagram { --channel: #c11574; --channel-soft: #fdf2fa; --channel-bubble: #fdf2fa; --channel-line: #f9a8d4; }
.conversation-workspace.channel-site { --channel: #175cd3; --channel-soft: #eff8ff; --channel-bubble: #eff8ff; --channel-line: #93c5fd; }
.conversation-workspace.channel-default { --channel: #475467; --channel-soft: #f2f4f7; --channel-bubble: #f8fafc; --channel-line: #cbd5e1; }
.conversation-list { display: grid; gap: 8px; }
.conversation-item { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #fff; }
.conversation-item:hover, .conversation-item.active { border-color: var(--channel); background: var(--channel-soft); }
.conversation-item .head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.chat-panel { min-height: 620px; display: flex; flex-direction: column; }
.chat-history { flex: 1; padding: 8px 0; }
.reply-box { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; }
.message { max-width: 74%; padding: 12px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--line); }
.message.inbound { background: #fff; }
.message.outbound { background: var(--channel-bubble); border-color: var(--channel-line); margin-left: auto; }
.reply-form textarea { min-height: 150px; border-color: var(--channel-line); }
.reply-form textarea:focus { outline: 2px solid var(--channel-line); outline-offset: 1px; }
.reply-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copy-feedback { color: var(--ok); font-size: 12px; font-weight: 800; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.form-grid { display: grid; gap: 12px; }
.filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
label { font-weight: 700; display: block; margin-bottom: 6px; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 10px; font: inherit; background: #fff; color: var(--text); }
textarea { min-height: 180px; resize: vertical; }
.notice { background: #ecfdf3; border: 1px solid #abefc6; color: #05603a; padding: 10px 12px; border-radius: 6px; margin-bottom: 16px; }
.empty { color: var(--muted); padding: 18px; background: var(--panel-soft); border-radius: 8px; }

@media (max-width: 1200px) {
  .grid.metrics.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-main-grid, .dashboard-intelligence-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; }
  .dashboard-hero { display: block; }
  .dashboard-filters { margin-top: 14px; }
  .grid.metrics, .grid.metrics.six, .grid.two, .grid.three, .filters, .split, .signal-grid, .inbox-layout { grid-template-columns: 1fr; }
  .priority-item { grid-template-columns: 1fr; }
  .message { max-width: 100%; }
}

/* Ajustes pos V2.5.0 - retomada por template e diagnostico de falha */
.service-window-callout{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-top:1px solid #8a6a24;background:#2a2417;color:#f7e5b3}.service-window-callout p{margin:3px 0 0;color:#d8c48e}.template-send-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.5)}.template-send-dialog::backdrop{background:rgba(3,10,18,.72)}.template-send-dialog form{display:flex;flex-direction:column;gap:16px;padding:20px}.template-send-dialog label{display:flex;flex-direction:column;gap:7px}.dialog-heading,.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-heading h2{margin:3px 0 0}.dialog-actions{justify-content:flex-end;border-top:1px solid var(--line);padding-top:14px}.icon-button{width:34px;height:34px;border:1px solid var(--line);border-radius:6px;background:var(--panel-soft);color:var(--text);font-size:24px;line-height:1;cursor:pointer}.template-dialog-content{display:grid;gap:14px}.template-fixed-copy{padding:16px;border:1px solid rgba(10,60,40,.15);border-radius:8px;background:#dcefe5;color:#14231d}.template-fixed-copy p{white-space:pre-wrap;line-height:1.5}.template-fixed-copy small{display:block;color:#53675e}.message-failure{width:100%;margin-top:4px;padding:8px 10px;border:1px solid #75404a;border-radius:6px;background:#2a1920;color:#f6dce1}.message-failure summary{cursor:pointer;font-weight:700}.message-failure p{margin:7px 0;color:#e4c4ca}.technical-error{display:flex;align-items:flex-start;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12)}.technical-error code{flex:1;overflow-wrap:anywhere;color:#f2cbd2}.message .chips form{margin:0}@media(max-width:700px){.service-window-callout{align-items:stretch;flex-direction:column}.template-send-dialog form{padding:15px}.dialog-actions{flex-wrap:wrap}.dialog-actions .btn{flex:1}}
.variable-source-list{display:grid;gap:10px}.resolved-variable{min-height:42px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel-soft);color:var(--text)}.resolved-variable.missing{border-color:#8e3e4b;color:#f3a6b2}.template-quality{margin-top:6px}.highlight-row{animation:template-highlight 3s ease-out;background:rgba(23,201,154,.14)}@keyframes template-highlight{0%,45%{box-shadow:inset 4px 0 0 #17c99a;background:rgba(23,201,154,.22)}100%{box-shadow:none}}form.is-processing{position:relative;pointer-events:none;opacity:.82}.action-spinner{display:inline-block;width:14px;height:14px;margin-right:7px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:action-spin .7s linear infinite}@keyframes action-spin{to{transform:rotate(360deg)}}





/* =========================================================
   V2.2.2 - Refinamento final do Dashboard
   Objetivo: produto mais compacto, legível e equilibrado
   ========================================================= */

/* Área geral mais compacta */
.content {
  padding: 22px 28px;
  max-width: 1680px;
}

/* Header do dashboard */
.dashboard-hero {
  padding: 18px 22px;
  margin-bottom: 16px;
  border-radius: 12px;
  align-items: center;
}

.dashboard-hero h1 {
  font-size: 26px;
  margin-bottom: 4px;
}

.dashboard-hero p {
  margin: 0;
  max-width: 650px;
  line-height: 1.35;
}

.eyebrow {
  margin-bottom: 6px;
}

/* Filtros do header */
.dashboard-filters {
  gap: 10px;
}

.period-control {
  min-width: 255px;
  padding: 8px 10px;
  border-radius: 10px;
}

.period-control strong {
  font-size: 12px;
}

.period-control small {
  font-size: 11px;
}

.period-control select {
  width: 28px;
  height: 28px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.period-control option {
  color: var(--text);
  background: #fff;
}

.btn {
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 13px;
}

.icon-btn {
  width: 38px;
  height: 38px;
}

/* Cards principais */
.grid.metrics.six {
  gap: 14px;
}

.metric {
  min-height: 88px;
  padding: 13px 14px;
  border-radius: 12px;
}

.metric-top {
  gap: 10px;
}

.metric-icon {
  width: 42px;
  height: 42px;
}

.metric .value {
  font-size: 25px;
  line-height: 1;
  margin-top: 2px;
}

.metric .hint {
  font-size: 11px;
  margin-top: 7px;
}

.trend {
  font-size: 11px;
  padding: 2px 6px;
}

.trend.neutral {
  background: #f1f5f9;
  color: #64748b;
}

/* Painéis */
.panel {
  padding: 15px;
  border-radius: 12px;
}

.panel h2 {
  font-size: 16px;
  margin-bottom: 10px;
}

.panel p {
  line-height: 1.4;
}

.between {
  align-items: center;
  gap: 12px;
}

.between .muted {
  margin: 2px 0 0;
}

/* Grid principal: conversas + central de atenção */
.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(300px, .65fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.dashboard-side-stack {
  display: grid;
  gap: 14px;
}

/* Conversas prioritárias */
.priority-conversations-panel {
  min-height: auto;
}

.priority-list {
  display: grid;
  gap: 0;
}

.priority-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  min-height: 66px;
  border-bottom: 1px solid var(--line);
}

.priority-item:last-child {
  border-bottom: 0;
}

.priority-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.priority-avatar .icon {
  width: 16px;
  height: 16px;
}

.priority-body {
  min-width: 0;
}

.priority-body strong {
  font-size: 13px;
  margin-bottom: 3px;
}

.priority-body p {
  margin: 0 0 6px;
  color: #334155;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.priority-meta .badge,
.priority-meta .channel-badge {
  font-size: 10.5px;
  padding: 2px 6px;
  flex: 0 0 auto;
}

.priority-meta .muted {
  font-size: 11px;
  flex: 0 0 auto;
}

.priority-item > .btn {
  padding: 7px 10px;
  font-size: 12px;
}

/* Central de atenção */
.attention-panel h2 {
  margin-bottom: 12px;
}

.attention-group {
  display: grid;
  gap: 8px;
}

.attention-group + .attention-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.attention-group-title {
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.attention-item {
  display: grid;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
}

/* Itens numéricos */
.attention-item.numeric {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 11px;
  min-height: 48px;
}

.attention-item.numeric .value {
  min-width: 0;
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
}

.attention-item.numeric .muted {
  font-size: 12px;
  line-height: 1.25;
}

/* Itens textuais */
.attention-item.textual {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px 12px;
  min-height: 56px;
}

.attention-item.textual .muted {
  order: -1;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
  color: var(--muted);
}

.attention-item.textual .value {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

/* Severidade */
.attention-item.high {
  border-left: 4px solid #f97066;
}

.attention-item.medium {
  border-left: 4px solid #fdb022;
}

.attention-item.normal {
  border-left: 4px solid #94a3b8;
}

/* Resumo executivo em faixa horizontal */
.executive-summary-panel {
  padding: 16px 18px;
}

.executive-summary-panel .chips {
  margin-bottom: 8px;
}

.executive-summary-panel .executive-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(420px, .9fr);
  gap: 18px;
  align-items: start;
}

.executive-summary-panel .executive-summary > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.executive-summary-panel .summary-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.executive-summary-panel .summary-facts div {
  padding: 10px 12px;
  border-radius: 10px;
}

.executive-summary-panel .summary-facts span {
  font-size: 10.5px;
  margin-bottom: 3px;
}

.executive-summary-panel .summary-facts strong {
  display: block;
  font-size: 12px;
  line-height: 1.25;
}

/* Inteligência do período */
.dashboard-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.bar-list {
  gap: 10px;
}

.bar-row {
  grid-template-columns: minmax(120px, 1fr) 42px 42px;
  gap: 8px;
}

.bar-row strong {
  font-size: 13px;
}

.bar-row + .muted,
.bar-list .muted[style] {
  font-size: 12px;
  line-height: 1.25;
}

.bar-track {
  height: 6px;
}

/* Sinais comerciais */
.section-gap {
  margin-top: 14px;
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.signal-card {
  padding: 13px;
  border-radius: 12px;
}

.signal-card .metric-icon {
  width: 36px;
  height: 36px;
}

.signal-card strong {
  font-size: 21px;
  margin-top: 2px;
}

.signal-card .muted {
  font-size: 12px;
}

/* Sidebar mais enxuta */
.sidebar {
  padding: 20px 16px;
}

.brand {
  margin-bottom: 20px;
}

.nav-section {
  margin-top: 15px;
}

.nav a {
  padding: 9px 11px;
}

.sidebar-card {
  padding: 12px;
}

.current-client-card {
  padding: 10px 12px;
}

/* Responsivo */
@media (max-width: 1350px) {
  .priority-meta {
    flex-wrap: wrap;
    white-space: normal;
  }
}

@media (max-width: 1300px) {
  .executive-summary-panel .executive-summary {
    grid-template-columns: 1fr;
  }

  .executive-summary-panel .summary-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .grid.metrics.six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-main-grid,
  .dashboard-intelligence-grid {
    grid-template-columns: 1fr;
  }

  .signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .content {
    padding: 18px;
  }

  .dashboard-hero {
    display: block;
    padding: 16px;
  }

  .dashboard-filters {
    margin-top: 14px;
  }

  .priority-item {
    grid-template-columns: 1fr;
  }

  .priority-avatar {
    display: none;
  }

  .priority-item > .btn {
    justify-self: start;
  }

  .signal-grid {
    grid-template-columns: 1fr;
  }
}

/* V2.2.3 - Ajustes finais de operação */
.dashboard-page .dashboard-main-grid {
  align-items: stretch;
}

.dashboard-page .dashboard-side-stack,
.dashboard-page .attention-panel {
  height: 100%;
}

.dashboard-page .priority-item {
  grid-template-columns: 28px 30px minmax(0, 1fr);
}

.dashboard-page .badge,
.dashboard-page .channel-badge {
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: 10.5px;
  padding: 2px 6px;
  font-weight: 500;
}

.dashboard-page .badge,
.dashboard-page .badge:not(.ok):not(.warn):not(.danger):not(.dark):not(.neutral) {
  color: #1d4ed8;
}

.dashboard-page .badge.ok,
.dashboard-page .channel-badge.whatsapp {
  color: #027a48;
}

.dashboard-page .badge.warn {
  color: #b54708;
}

.dashboard-page .badge.danger {
  color: #b42318;
}

.dashboard-page .badge.dark,
.dashboard-page .badge.neutral,
.dashboard-page .channel-badge.default {
  color: #344054;
}

.dashboard-page .channel-badge.instagram {
  color: #c11574;
}

.dashboard-page .channel-badge.site,
.dashboard-page .channel-badge.messenger {
  color: #175cd3;
}

.dashboard-page .channel-badge.email {
  color: #5925dc;
}

.dashboard-page .pin-marker {
  background: #fff;
  border: 1px solid #c2410c;
  color: #9a3412;
}

/* =========================================================
   V2.3.2 - Redesign base escuro e sidebar retratil
   Inspirado em sistemas SaaS premium, sem copiar interfaces
   ========================================================= */

:root {
  --bg: #070c16;
  --bg-elevated: #0b1220;
  --panel: #101827;
  --panel-soft: #141f31;
  --panel-strong: #182437;
  --line: #263449;
  --line-soft: #1d2a3d;
  --text: #eef4ff;
  --muted: #91a2ba;
  --brand: #16c784;
  --brand-2: #1e5bff;
  --brand-dark: #0b2a57;
  --accent: #38bdf8;
  --danger: #fb7185;
  --warn: #f59e0b;
  --ok: #16c784;
  --shadow: 0 18px 42px rgba(0, 0, 0, .26);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, .18);
  --radius: 10px;
  --radius-sm: 8px;
  --sidebar-width: 264px;
  --sidebar-collapsed-width: 76px;
}

body {
  background:
    radial-gradient(circle at 18% -10%, rgba(30, 91, 255, .18), transparent 34%),
    linear-gradient(135deg, #060b14 0%, #08111e 54%, #07101a 100%);
  color: var(--text);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: var(--bg);
}

.auth-panel {
  width: min(440px, 100%);
}

.actions-bar,
.form-actions,
.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.actions-bar {
  margin-top: 16px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.checkbox-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  transition: grid-template-columns .2s ease;
}

body.sidebar-collapsed .shell {
  grid-template-columns: var(--sidebar-collapsed-width) minmax(0, 1fr);
}

.main {
  background:
    linear-gradient(180deg, rgba(11, 18, 32, .62), rgba(7, 12, 22, .96) 260px),
    var(--bg);
}

.content {
  max-width: 1760px;
  padding: 24px 30px;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(16, 24, 39, .94), rgba(7, 12, 22, .98)),
    #080d17;
  border-right: 1px solid rgba(93, 116, 150, .28);
  color: #dbeafe;
  padding: 18px 14px;
  overflow: hidden;
  z-index: 2;
}

.brand {
  gap: 10px;
  margin: 2px 4px 20px;
  min-height: 40px;
  flex: 0 0 auto;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #16c784, #1e5bff);
  box-shadow: 0 12px 22px rgba(22, 199, 132, .18);
}

.brand-name {
  min-width: 0;
  white-space: nowrap;
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: auto;
  border: 1px solid rgba(145, 162, 186, .24);
  border-radius: 9px;
  background: rgba(20, 31, 49, .78);
  color: #c7d7ee;
  cursor: pointer;
}

.sidebar-toggle:hover {
  border-color: rgba(56, 189, 248, .6);
  color: #fff;
  background: rgba(30, 91, 255, .18);
}

.nav {
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-color: rgba(148, 163, 184, .38) transparent;
  scrollbar-width: thin;
}

.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .34); border-radius: 6px; }

.nav-group + .nav-group {
  border-top: 1px solid rgba(93, 116, 150, .14);
}

.nav-section {
  align-items: center;
  background: transparent;
  border: 0;
  color: #8395b0;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: .08em;
  margin: 0;
  padding: 13px 10px 9px;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}

.nav-section:hover,
.nav-section:focus-visible {
  color: #fff;
  outline: 0;
}

.nav-section-chevron {
  display: inline-flex;
  transition: transform .16s ease;
}

.nav-group.is-open .nav-section-chevron {
  transform: rotate(180deg);
}

.nav-group-items {
  padding-bottom: 7px;
}

.nav-group-items[hidden] {
  display: none;
}

.nav a {
  position: relative;
  border: 1px solid transparent;
  color: #c8d5e8;
  padding: 10px 11px;
}

.nav a:hover,
.nav a.active {
  background: linear-gradient(90deg, rgba(30, 91, 255, .26), rgba(22, 199, 132, .1));
  border-color: rgba(67, 92, 128, .54);
  color: #fff;
}

.nav a.active {
  box-shadow: inset 3px 0 0 var(--brand), 0 10px 24px rgba(0, 0, 0, .12);
}

.sidebar-card,
.current-client-card {
  background: linear-gradient(180deg, rgba(20, 31, 49, .88), rgba(12, 20, 34, .88));
  border-color: rgba(91, 114, 148, .38);
  box-shadow: var(--shadow-soft);
}

.sidebar-card .btn {
  background: linear-gradient(135deg, #16c784, #0f9f66);
  border-color: transparent;
  color: #04100b;
  font-weight: 800;
}

.current-client-card span {
  color: #8194b1;
}

body.sidebar-collapsed .sidebar {
  padding-inline: 12px;
}

body.sidebar-collapsed .brand {
  justify-content: center;
  margin-inline: 0;
}

body.sidebar-collapsed .brand-name,
body.sidebar-collapsed .nav-section,
body.sidebar-collapsed .nav a span,
body.sidebar-collapsed .sidebar-card,
body.sidebar-collapsed .current-client-card {
  display: none;
}

body.sidebar-collapsed .sidebar-toggle {
  position: absolute;
  left: 50%;
  top: 62px;
  margin: 0;
  transform: translateX(-50%);
}

body.sidebar-collapsed .nav {
  margin-top: 50px;
}

body.sidebar-collapsed .nav-group {
  border-top: 0;
}

body.sidebar-collapsed .nav-group-items,
body.sidebar-collapsed .nav-group-items[hidden] {
  display: block;
  padding: 0;
}

body.sidebar-collapsed .nav a {
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  padding: 0;
}

body.sidebar-collapsed .nav a::after {
  content: attr(data-sidebar-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  background: #101827;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  box-shadow: var(--shadow);
  transition: opacity .15s ease;
}

body.sidebar-collapsed .nav a:hover::after {
  opacity: 1;
}

h1,
h2,
h3 {
  color: #f7fbff;
}

.muted {
  color: var(--muted);
}

.eyebrow {
  color: var(--accent);
  font-weight: 800;
}

.panel,
.metric,
.dashboard-hero,
.conversation-item,
.attention-item,
.signal-card,
.summary-facts div {
  background: linear-gradient(180deg, rgba(16, 24, 39, .96), rgba(12, 20, 34, .96));
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.panel,
.metric,
.dashboard-hero,
.attention-item,
.signal-card,
.conversation-item,
.period-control,
.btn,
input,
textarea,
select,
.empty,
.notice {
  border-radius: var(--radius);
}

.panel:hover,
.metric:hover,
.clickable-card:hover {
  border-color: rgba(56, 189, 248, .34);
}

.metric {
  background:
    linear-gradient(180deg, rgba(17, 26, 42, .98), rgba(12, 20, 34, .98)),
    var(--panel);
}

.metric .value {
  color: #ffffff;
}

.metric .hint,
.table th {
  color: #8395af;
}

.table th,
.table td {
  border-bottom-color: var(--line-soft);
}

.table tr:hover td {
  background: rgba(30, 91, 255, .07);
}

.clickable-row:hover,
.clickable-card:hover {
  background: rgba(30, 91, 255, .08);
}

.clickable-row:hover .conversation-title,
.clickable-card:hover .conversation-title {
  color: #7dd3fc;
}

.btn {
  background: rgba(20, 31, 49, .92);
  border-color: var(--line);
  color: #e6eefb;
}

.btn:hover {
  border-color: rgba(56, 189, 248, .42);
  background: rgba(30, 91, 255, .16);
}

.btn.primary {
  background: linear-gradient(135deg, #1e5bff, #123b94);
  border-color: rgba(96, 165, 250, .36);
  color: #fff;
  box-shadow: 0 12px 24px rgba(30, 91, 255, .22);
}

input,
textarea,
select,
.period-control {
  background: rgba(8, 14, 24, .92);
  border-color: var(--line);
  color: var(--text);
}

input::placeholder,
textarea::placeholder {
  color: #71839d;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(56, 189, 248, .28);
  border-color: rgba(56, 189, 248, .65);
}

select option,
.period-control option {
  color: var(--text);
  background: #101827;
}

.badge,
.channel-badge {
  border-radius: 6px;
  font-weight: 700;
}

.badge.neutral {
  background: rgba(148, 163, 184, .14);
  color: #cbd5e1;
}

.badge.dark {
  background: rgba(100, 116, 139, .22);
}

.badge.ok,
.channel-badge.whatsapp,
.pending-count {
  background: #16c784;
  color: #03140d;
}

.badge.warn {
  background: #f59e0b;
  color: #170f02;
}

.badge.danger {
  background: #fb7185;
  color: #190409;
}

.channel-dot,
.avatar-dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.channel-dot {
  background: rgba(148, 163, 184, .15);
  color: #d7e2f4;
}

.channel-dot.whatsapp {
  background: rgba(22, 199, 132, .16);
  color: #5ee4aa;
}

.channel-dot.instagram {
  background: rgba(236, 72, 153, .16);
  color: #f9a8d4;
}

.channel-dot.site,
.channel-dot.messenger {
  background: rgba(56, 189, 248, .14);
  color: #7dd3fc;
}

.channel-dot.email {
  background: rgba(167, 139, 250, .16);
  color: #c4b5fd;
}

.avatar-dot {
  background: #1e293b;
  color: #e2e8f0;
}

.pin-marker {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
}

.pin-action {
  background: rgba(15, 23, 42, .92);
  border-color: var(--line);
  color: #95a7c0;
}

.pin-action:hover {
  background: rgba(30, 91, 255, .16);
  border-color: rgba(56, 189, 248, .44);
  color: #7dd3fc;
}

.pin-action.active {
  background: rgba(22, 199, 132, .14);
  border-color: rgba(22, 199, 132, .42);
  color: #5ee4aa;
}

.metric-icon.green {
  background: rgba(22, 199, 132, .14);
  color: #5ee4aa;
}

.metric-icon.blue {
  background: rgba(30, 91, 255, .16);
  color: #93c5fd;
}

.metric-icon.amber {
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
}

.metric-icon.purple {
  background: rgba(167, 139, 250, .16);
  color: #c4b5fd;
}

.metric-icon.red {
  background: rgba(251, 113, 133, .15);
  color: #fda4af;
}

.metric-icon.slate {
  background: rgba(148, 163, 184, .14);
  color: #cbd5e1;
}

.trend.neutral {
  background: rgba(148, 163, 184, .14);
  color: #b7c5d8;
}

.dashboard-hero {
  background:
    linear-gradient(135deg, rgba(13, 42, 87, .72), rgba(14, 22, 36, .96)),
    var(--panel);
}

.period-control {
  background: rgba(5, 11, 20, .62);
}

.attention-item.high {
  border-color: rgba(251, 113, 133, .48);
  background: linear-gradient(180deg, rgba(251, 113, 133, .12), rgba(16, 24, 39, .96));
}

.attention-item.medium {
  border-color: rgba(245, 158, 11, .48);
  background: linear-gradient(180deg, rgba(245, 158, 11, .11), rgba(16, 24, 39, .96));
}

.attention-item.normal {
  border-left-color: #64748b;
}

.summary-facts div,
.empty {
  background: rgba(20, 31, 49, .82);
}

.bar-track {
  background: rgba(148, 163, 184, .18);
}

.bar-fill {
  background: linear-gradient(90deg, #16c784, #38bdf8);
}

.conversation-workspace {
  --channel: #16c784;
  --channel-soft: rgba(22, 199, 132, .12);
  --channel-bubble: rgba(22, 199, 132, .13);
  --channel-line: rgba(22, 199, 132, .38);
}

.conversation-workspace.channel-instagram {
  --channel: #f472b6;
  --channel-soft: rgba(244, 114, 182, .12);
  --channel-bubble: rgba(244, 114, 182, .12);
  --channel-line: rgba(244, 114, 182, .36);
}

.conversation-workspace.channel-site {
  --channel: #38bdf8;
  --channel-soft: rgba(56, 189, 248, .12);
  --channel-bubble: rgba(56, 189, 248, .12);
  --channel-line: rgba(56, 189, 248, .36);
}

.conversation-item {
  background: rgba(16, 24, 39, .8);
}

.conversation-item:hover,
.conversation-item.active {
  border-color: var(--channel);
  background: var(--channel-soft);
}

.message {
  background: rgba(16, 24, 39, .92);
  border-color: var(--line);
}

.message.inbound {
  background: rgba(16, 24, 39, .96);
}

.message.outbound {
  background: var(--channel-bubble);
  border-color: var(--channel-line);
}

.reply-box {
  border-top-color: var(--line-soft);
}

.reply-form textarea {
  border-color: var(--channel-line);
}

.notice {
  background: rgba(22, 199, 132, .12);
  border-color: rgba(22, 199, 132, .34);
  color: #9af2c7;
}

.notice.danger {
  background: rgba(251, 113, 133, .12);
  border-color: rgba(251, 113, 133, .34);
  color: #fecdd3;
}

.notice strong {
  display: block;
  margin-bottom: 6px;
}

.error-list {
  margin: 0;
  padding-left: 18px;
}

.required,
.field-error {
  color: #fda4af;
}

.field-error {
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
}

input.has-error,
select.has-error,
textarea.has-error {
  border-color: rgba(251, 113, 133, .72);
  box-shadow: 0 0 0 3px rgba(251, 113, 133, .12);
}

.section-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-heading h2 {
  font-size: 17px;
  margin: 0 0 4px;
}

.module-table td,
.permission-matrix td {
  vertical-align: middle;
}

.permission-matrix th,
.permission-matrix td {
  min-width: 132px;
}

.permission-matrix th:first-child,
.permission-matrix td:first-child {
  min-width: 260px;
}

.toggle-line {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  gap: 8px;
  min-height: 28px;
  white-space: nowrap;
}

.toggle-line input {
  accent-color: var(--green);
  height: 16px;
  width: 16px;
}

.toggle-line.compact {
  color: var(--muted);
  font-size: 12px;
}

.form-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.panel-subtle {
  background: rgba(12, 20, 34, .48);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px;
}

.dashboard-page .badge,
.dashboard-page .channel-badge {
  background: rgba(12, 20, 34, .82);
}

.dashboard-page .badge,
.dashboard-page .badge:not(.ok):not(.warn):not(.danger):not(.dark):not(.neutral) {
  color: #93c5fd;
}

.dashboard-page .badge.ok,
.dashboard-page .channel-badge.whatsapp {
  color: #5ee4aa;
}

.dashboard-page .badge.warn {
  color: #fbbf24;
}

.dashboard-page .badge.danger {
  color: #fda4af;
}

.dashboard-page .badge.dark,
.dashboard-page .badge.neutral,
.dashboard-page .channel-badge.default {
  color: #cbd5e1;
}

.dashboard-page .pin-marker {
  background: rgba(245, 158, 11, .13);
  border-color: rgba(245, 158, 11, .42);
  color: #fbbf24;
}

@media (max-width: 1000px) {
  .shell,
  body.sidebar-collapsed .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
    overflow: visible;
  }

  .sidebar-toggle {
    display: none;
  }

  body.sidebar-collapsed .brand-name,
  body.sidebar-collapsed .nav-section,
  body.sidebar-collapsed .nav a span,
  body.sidebar-collapsed .sidebar-card,
  body.sidebar-collapsed .current-client-card {
    display: initial;
  }

  body.sidebar-collapsed .nav a {
    justify-content: flex-start;
    width: auto;
    height: auto;
    margin: 0 0 5px;
    padding: 9px 11px;
  }
}

/* V2.3.6 - Conversa operacional com rolagem independente */
.conversation-detail-layout {
  align-items: stretch;
  height: calc(100vh - 150px);
  min-height: 620px;
  overflow: hidden;
}

.conversation-detail-layout .panel {
  min-height: 0;
}

.conversation-list-panel,
.conversation-detail-layout > .stack {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
}

.conversation-list-panel .conversation-list {
  align-content: start;
  overflow-y: auto;
  padding-right: 4px;
}

.conversation-detail-layout > .stack {
  overflow-y: auto;
  padding-right: 4px;
}

.conversation-detail-layout .chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.conversation-detail-layout .chat-panel > .row-actions {
  border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
  margin: -2px -2px 0;
  padding: 0 0 12px;
}

.conversation-detail-layout .chat-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 4px 14px 0;
  scroll-behavior: smooth;
}

.conversation-list-panel .conversation-list,
.conversation-detail-layout > .stack,
.conversation-detail-layout .chat-history {
  scrollbar-color: rgba(148, 163, 184, .42) transparent;
  scrollbar-width: thin;
}

.conversation-list-panel .conversation-list::-webkit-scrollbar,
.conversation-detail-layout > .stack::-webkit-scrollbar,
.conversation-detail-layout .chat-history::-webkit-scrollbar {
  height: 7px;
  width: 7px;
}

.conversation-list-panel .conversation-list::-webkit-scrollbar-thumb,
.conversation-detail-layout > .stack::-webkit-scrollbar-thumb,
.conversation-detail-layout .chat-history::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .38);
  border-radius: 7px;
}

.conversation-detail-layout .reply-box {
  background: rgba(10, 17, 29, .98);
  border-top: 1px solid var(--line-soft);
  flex: 0 0 auto;
  margin: 0 -18px;
  padding: 14px 18px 16px;
}

.conversation-detail-layout .reply-form textarea {
  background: #050b14;
  border-color: rgba(125, 211, 252, .38);
  color: #f8fafc;
  max-height: 170px;
  min-height: 112px;
  resize: vertical;
}

.conversation-detail-layout .reply-form textarea::placeholder {
  color: #8293ad;
}

.conversation-detail-layout .reply-form textarea:focus {
  background: #050b14;
  border-color: rgba(22, 199, 132, .72);
  color: #fff;
  outline: 2px solid rgba(22, 199, 132, .2);
  outline-offset: 1px;
}

.conversation-detail-layout .message {
  color: #eef4ff;
}

.conversation-detail-layout .message.outbound {
  background: rgba(22, 199, 132, .13);
  border-color: rgba(22, 199, 132, .38);
}

.conversation-detail-layout .message.outbound .muted {
  color: #9fb2c9;
}

.conversation-detail-layout .message .chips {
  align-items: center;
}

.message-status {
  align-items: center;
  color: #9fb2c9;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
  margin-left: auto;
}

.message-status.status-read {
  color: #60a5fa;
}

.message-status.status-failed {
  color: #f97373;
}

.message-status.status-pending,
.message-status.status-sending,
.message-status.status-drafted,
.message-status.status-draft {
  color: #cbd5e1;
}

/* V2.4.4 - Assistente guiado de Brand DNA */
.wizard-page-header,
.brand-dna-wizard {
  margin-inline: auto;
  max-width: 820px;
}

.brand-dna-wizard {
  display: grid;
  gap: 26px;
  margin-top: 18px;
  min-height: 500px;
  padding: 28px;
}

.wizard-progress {
  display: grid;
  gap: 10px;
}

.wizard-progress-track {
  background: rgba(148, 163, 184, .18);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.wizard-progress-track > span {
  background: var(--brand);
  display: block;
  height: 100%;
  transition: width .18s ease;
}

.wizard-step {
  align-content: start;
  display: grid;
  gap: 14px;
  min-height: 290px;
}

.wizard-step[hidden] { display: none; }

.wizard-question {
  color: #f7fbff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.3;
}

.wizard-step input,
.wizard-step textarea {
  font-size: 16px;
  width: 100%;
}

.wizard-step textarea {
  min-height: 170px;
  resize: vertical;
}

.field-error {
  color: #fda4af;
  font-size: 13px;
  font-weight: 700;
}

.field-error[hidden] { display: none; }
.wizard-activate { margin-top: 4px; }

.wizard-actions {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
}

.wizard-actions [data-wizard-next],
.wizard-actions [data-wizard-submit] {
  margin-left: auto;
}

@media (max-width: 720px) {
  .brand-dna-wizard { min-height: 0; padding: 20px; }
  .wizard-question { font-size: 20px; }
  .wizard-step { min-height: 330px; }
}

.btn.micro {
  border-radius: 6px;
  font-size: 11px;
  min-height: 0;
  padding: 5px 8px;
}

.new-messages-indicator {
  align-self: center;
  background: #16c784;
  border: 0;
  border-radius: 999px;
  bottom: 138px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .24);
  color: #04111d;
  cursor: pointer;
  font-weight: 900;
  padding: 8px 14px;
  position: absolute;
  z-index: 5;
}

.new-messages-indicator[hidden] {
  display: none;
}

.conversation-detail-layout .chat-panel {
  position: relative;
}

.sync-state {
  min-height: 18px;
  padding-top: 8px;
}

.row-updated {
  animation: rowPulse 1.8s ease;
}

@keyframes rowPulse {
  0% {
    background: rgba(22, 199, 132, .18);
  }

  100% {
    background: transparent;
  }
}

@media (max-width: 1000px) {
  .conversation-detail-layout {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .conversation-list-panel .conversation-list,
  .conversation-detail-layout > .stack,
  .conversation-detail-layout .chat-history {
    max-height: none;
    overflow: visible;
  }
}

/* Correcao pos V2.4.4 - legibilidade e colunas da conversa aberta */
.conversation-detail-layout {
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  height: calc(100dvh - 168px);
  max-height: calc(100dvh - 168px);
  min-height: 0;
}

.conversation-list-panel,
.conversation-detail-layout .chat-panel,
.conversation-detail-layout .conversation-insights-panel {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

.conversation-item.active {
  background: #dbe8e4;
  border-color: var(--channel);
  box-shadow: inset 4px 0 0 var(--channel), 0 8px 20px rgba(0, 0, 0, .16);
  color: #14231f;
}

.conversation-item.active strong,
.conversation-item.active .conversation-title {
  color: #10211c;
}

.conversation-item.active .muted,
.conversation-item.active p {
  color: #475f57;
}

.conversation-item.active .message-status {
  color: #36574d;
}

.conversation-item.active .message-status.status-read {
  color: #1d4ed8;
}

.conversation-item.active .badge,
.conversation-item.active .channel-badge,
.conversation-item.active .pin-marker,
.conversation-item.active .pending-count {
  border-color: rgba(15, 35, 29, .24);
}

.conversation-detail-layout .conversation-insights-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-color: rgba(148, 163, 184, .42) transparent;
  scrollbar-width: thin;
}

.conversation-detail-layout .conversation-insights-panel::-webkit-scrollbar { width: 7px; }
.conversation-detail-layout .conversation-insights-panel::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .38);
  border-radius: 7px;
}

.conversation-detail-layout .conversation-insights-panel > .panel {
  flex: 0 0 auto;
  height: auto;
  min-height: auto;
  overflow: visible;
  position: relative;
}

.conversation-detail-layout .conversation-insights-panel .grid.two {
  grid-template-columns: minmax(0, 1fr);
}

.conversation-detail-layout .conversation-insights-panel p,
.conversation-detail-layout .conversation-insights-panel strong,
.conversation-detail-layout .conversation-insights-panel .badge,
.conversation-detail-layout .conversation-insights-panel option {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 1400px) {
  .conversation-detail-layout {
    gap: 12px;
    grid-template-columns: 270px minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1180px) {
  .conversation-detail-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .conversation-detail-layout .conversation-list-panel,
  .conversation-detail-layout .chat-panel {
    height: calc(100dvh - 168px);
    max-height: calc(100dvh - 168px);
  }

  .conversation-detail-layout .conversation-insights-panel {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 1000px) {
  .conversation-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .conversation-detail-layout .conversation-list-panel {
    height: auto;
    max-height: none;
  }

  .conversation-detail-layout .chat-panel {
    height: min(760px, calc(100dvh - 32px));
    max-height: none;
  }

  .conversation-detail-layout .chat-history {
    min-height: 260px;
    overflow-y: auto;
  }

  .conversation-detail-layout .conversation-insights-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   V2.6.0 - Sistema visual profissional, claro e operacional
   ========================================================= */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-variable.woff2") format("woff2-variations");
}

:root {
  color-scheme: light;
  --color-bg-app: #f3f5f7;
  --color-bg-surface: #ffffff;
  --color-bg-sidebar: #243241;
  --color-text-primary: #25313d;
  --color-text-secondary: #66727f;
  --color-border: #dce2e7;
  --color-accent: #356b63;
  --color-success: #477b5c;
  --color-warning: #986927;
  --color-danger: #a95252;
  --bg: #f3f5f7;
  --bg-elevated: #eef1f4;
  --panel: #ffffff;
  --panel-soft: #f8fafb;
  --panel-strong: #eef2f4;
  --line: #dce2e7;
  --line-soft: #e8ecef;
  --text: #25313d;
  --muted: #66727f;
  --brand: #356b63;
  --brand-2: #496a88;
  --brand-dark: #274e49;
  --accent: #496a88;
  --danger: #a95252;
  --warn: #986927;
  --ok: #477b5c;
  --shadow: 0 1px 2px rgba(34, 48, 60, .06);
  --shadow-soft: 0 1px 2px rgba(34, 48, 60, .04);
  --radius: 5px;
  --radius-sm: 4px;
  --sidebar-width: 244px;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Source Sans 3", "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

.main {
  background: var(--bg);
}

.content {
  max-width: 1680px;
  padding: 24px 28px 32px;
}

h1,
h2,
h3 {
  color: var(--text);
  font-family: inherit;
  font-weight: 600;
}

h1 {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 5px;
}

h2 {
  font-size: 18px;
  line-height: 1.3;
}

h3 {
  font-size: 15px;
  line-height: 1.35;
}

strong,
label {
  font-weight: 600;
}

.eyebrow {
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .045em;
}

.sidebar {
  background: #243241;
  border-right: 1px solid #1c2935;
  color: #dbe2e8;
  padding: 18px 13px;
}

.brand {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 18px;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: #356b63;
  box-shadow: none;
}

.sidebar-toggle {
  border-color: #485765;
  border-radius: 4px;
  background: transparent;
  color: #cbd4dc;
}

.sidebar-toggle:hover {
  border-color: #81909d;
  background: #2d3d4c;
  color: #ffffff;
}

.nav-group + .nav-group {
  border-top-color: rgba(219, 226, 232, .1);
}

.nav-section {
  color: #9eabb6;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .055em;
  padding: 12px 9px 7px;
}

.nav-section:hover,
.nav-section:focus-visible {
  color: #ffffff;
}

.nav a {
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 3px;
  color: #d2dae1;
  font-weight: 500;
  margin-bottom: 3px;
  padding: 9px 10px;
}

.nav a:hover {
  background: #2b3a49;
  color: #ffffff;
}

.nav a.active {
  background: #314250;
  border-left-color: #7ba99f;
  box-shadow: none;
  color: #ffffff;
}

.sidebar-card,
.current-client-card {
  background: #2a3948;
  border-color: #42515f;
  border-radius: 5px;
  box-shadow: none;
}

.sidebar-card .btn {
  background: #e7eeec;
  border-color: #e7eeec;
  color: #294e49;
  font-weight: 600;
}

.sidebar-card .muted,
.current-client-card span {
  color: #aebac4 !important;
}

.topbar {
  min-height: 62px;
  padding: 10px 28px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.topbar-field span {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .035em;
}

.topbar-field strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.panel,
.metric,
.dashboard-hero,
.conversation-item,
.attention-item,
.signal-card,
.summary-facts div,
.diagnostic-account,
.panel-subtle {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.panel {
  padding: 17px;
}

.dashboard-hero {
  background: var(--panel);
  padding: 19px 20px;
}

.metric {
  min-height: 98px;
  padding: 15px;
}

.metric:hover,
.panel:hover,
.clickable-card:hover {
  border-color: #c9d1d8;
  box-shadow: none;
  transform: none;
}

.metric .value {
  color: var(--text);
  font-size: 28px;
  font-weight: 600;
}

.metric .hint,
.table th {
  color: var(--muted);
}

.metric-icon,
.signal-card .metric-icon,
.priority-avatar {
  width: 38px;
  height: 38px;
  border-radius: 5px;
}

.metric-icon.green,
.metric-icon.blue,
.metric-icon.amber,
.metric-icon.purple,
.metric-icon.red,
.metric-icon.slate {
  background: #edf1f3;
  color: #526472;
}

.metric-icon.green { color: #477b5c; background: #edf4ef; }
.metric-icon.amber { color: #986927; background: #f7f2e9; }
.metric-icon.red { color: #a95252; background: #f8eeee; }

.table th,
.table td,
.data-table th,
.data-table td {
  border-bottom-color: var(--line-soft);
  padding: 10px;
}

.table th,
.data-table th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .025em;
}

.table tr:hover td,
.clickable-row:hover,
.clickable-card:hover {
  background: #f7f9fa;
}

.clickable-row:hover .conversation-title,
.clickable-card:hover .conversation-title {
  color: var(--brand);
}

.btn {
  min-height: 36px;
  padding: 8px 12px;
  border-color: #ccd4da;
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
  font-weight: 600;
  box-shadow: none;
}

.btn:hover {
  border-color: #9fadb8;
  background: #f5f7f8;
}

.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  box-shadow: none;
}

.btn.primary:hover {
  background: #2d5d56;
  border-color: #2d5d56;
}

.btn.small {
  min-height: 30px;
  font-size: 12px;
}

.btn.micro,
.icon-button,
.pin-action {
  border-radius: 4px;
}

input,
textarea,
select,
.period-control,
.resolved-variable {
  border-color: #cfd7dd;
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
}

input:focus,
textarea:focus,
select:focus,
.reply-form textarea:focus,
.conversation-detail-layout .reply-form textarea:focus {
  border-color: #668d87;
  background: #ffffff;
  color: var(--text);
  outline: 2px solid rgba(53, 107, 99, .16);
  outline-offset: 1px;
}

input::placeholder,
textarea::placeholder,
.conversation-detail-layout .reply-form textarea::placeholder {
  color: #8a959f;
}

select option,
.period-control option {
  background: #ffffff;
  color: var(--text);
}

.period-control {
  background: #ffffff;
  padding: 8px 10px;
}

.badge,
.channel-badge,
.trend,
.pending-count,
.pin-marker,
.new-messages-indicator {
  border-radius: 3px;
  font-weight: 600;
}

.badge,
.channel-badge {
  background: #eef1f3;
  color: #4d5d69;
}

.badge.neutral,
.badge.dark,
.channel-badge.default {
  background: #eef1f3;
  color: #4d5d69;
}

.badge.ok,
.channel-badge.whatsapp,
.pending-count {
  background: #e8f2eb;
  color: #356748;
}

.badge.warn,
.pin-marker {
  background: #f7f0e3;
  color: #855b20;
}

.badge.danger {
  background: #f7eaea;
  color: #934747;
}

.channel-badge.instagram { background: #f5edf2; color: #86546f; }
.channel-badge.site,
.channel-badge.messenger { background: #eaf0f5; color: #476b88; }
.channel-badge.email { background: #f0eef5; color: #665a82; }

.channel-dot,
.avatar-dot {
  border-radius: 4px;
  box-shadow: none;
}

.avatar-dot {
  background: #e7ebee;
  color: #41515e;
}

.channel-dot { background: #eef1f3; color: #596a77; }
.channel-dot.whatsapp { background: #e8f2eb; color: #477b5c; }
.channel-dot.instagram { background: #f5edf2; color: #86546f; }
.channel-dot.site,
.channel-dot.messenger { background: #eaf0f5; color: #476b88; }
.channel-dot.email { background: #f0eef5; color: #665a82; }

.dashboard-page .badge,
.dashboard-page .channel-badge,
.dashboard-page .badge:not(.ok):not(.warn):not(.danger):not(.dark):not(.neutral) {
  background: #eef1f3;
  color: #4d5d69;
}

.dashboard-page .badge.ok,
.dashboard-page .channel-badge.whatsapp {
  background: #e8f2eb;
  color: #356748;
}

.dashboard-page .badge.warn,
.dashboard-page .pin-marker {
  background: #f7f0e3;
  border-color: #ead5ae;
  color: #855b20;
}

.dashboard-page .badge.danger {
  background: #f7eaea;
  color: #934747;
}

.attention-item.high {
  border-color: #e6c5c5;
  background: #fcf7f7;
}

.attention-item.medium {
  border-color: #ead9b9;
  background: #fcfaf5;
}

.summary-facts div,
.empty,
.panel-subtle {
  background: var(--panel-soft);
}

.bar-track,
.wizard-progress-track {
  border-radius: 2px;
  background: #e7ebee;
}

.bar-fill,
.wizard-progress-track > span {
  background: var(--brand);
}

.conversation-workspace,
.conversation-workspace.channel-whatsapp {
  --channel: #477b5c;
  --channel-soft: #f0f6f2;
  --channel-bubble: #edf5ef;
  --channel-line: #bfd5c6;
}

.conversation-workspace.channel-instagram {
  --channel: #86546f;
  --channel-soft: #f8f2f5;
  --channel-bubble: #f5edf2;
  --channel-line: #dac4d0;
}

.conversation-workspace.channel-site {
  --channel: #476b88;
  --channel-soft: #f0f4f7;
  --channel-bubble: #eaf0f5;
  --channel-line: #c4d2de;
}

.conversation-item,
.message,
.message.inbound {
  background: #ffffff;
  border-color: var(--line);
  color: var(--text);
}

.conversation-item:hover {
  background: var(--channel-soft);
}

.conversation-item.active {
  background: #edf4f1;
  border-color: #9cbab3;
  box-shadow: inset 3px 0 0 var(--brand);
  color: var(--text);
}

.conversation-item.active strong,
.conversation-item.active .conversation-title {
  color: var(--text);
}

.conversation-item.active .muted,
.conversation-item.active p,
.conversation-item.active .message-status {
  color: var(--muted);
}

.message.outbound,
.conversation-detail-layout .message.outbound {
  background: var(--channel-bubble);
  border-color: var(--channel-line);
}

.conversation-detail-layout .message,
.conversation-detail-layout .message.outbound .muted {
  color: var(--text);
}

.conversation-detail-layout .reply-box {
  background: #fafbfc;
  border-top-color: var(--line);
}

.conversation-detail-layout .reply-form textarea {
  background: #ffffff;
  border-color: #bcc8cf;
  color: var(--text);
}

.message-status {
  color: var(--muted);
  font-weight: 600;
}

.message-status.status-read { color: #496a88; }
.message-status.status-failed { color: var(--danger); }
.message-status.status-pending,
.message-status.status-sending,
.message-status.status-drafted,
.message-status.status-draft { color: var(--muted); }

.notice {
  background: #edf5ef;
  border-color: #bfd5c6;
  border-radius: 4px;
  color: #356748;
}

.notice.danger,
.alert.danger {
  background: #f8eeee;
  border-color: #dfbcbc;
  color: #934747;
}

.required,
.field-error {
  color: var(--danger);
}

.wizard-question {
  color: var(--text);
  font-size: 23px;
  font-weight: 600;
}

.new-messages-indicator {
  background: var(--brand);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(34, 48, 60, .14);
}

.service-window-callout {
  border-top-color: #dac89f;
  background: #f8f3e8;
  color: #6f5422;
}

.service-window-callout p {
  color: #806a40;
}

.template-send-dialog {
  border-radius: 5px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 16px 40px rgba(34, 48, 60, .18);
}

.template-send-dialog::backdrop {
  background: rgba(35, 48, 60, .45);
}

.template-fixed-copy,
.whatsapp-preview {
  border-radius: 5px;
  background: #edf5ef;
  color: var(--text);
}

.message-failure {
  border-color: #dfbcbc;
  border-radius: 4px;
  background: #f8eeee;
  color: #713b3b;
}

.message-failure p,
.technical-error code {
  color: #825050;
}

.step-number {
  border-radius: 4px;
  background: var(--brand);
  color: #ffffff;
  font-weight: 600;
}

.nav::-webkit-scrollbar-thumb,
.conversation-list-panel .conversation-list::-webkit-scrollbar-thumb,
.conversation-detail-layout > .stack::-webkit-scrollbar-thumb,
.conversation-detail-layout .chat-history::-webkit-scrollbar-thumb,
.conversation-detail-layout .conversation-insights-panel::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #a9b4bc;
}

body.sidebar-collapsed .nav a::after {
  border-color: #42515f;
  border-radius: 4px;
  background: #243241;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(20, 31, 40, .2);
}

@media (max-width: 1000px) {
  .content {
    padding: 20px;
  }

  .topbar {
    padding-inline: 20px;
  }
}

/* V2.6.1 - Destaque por superficie e iconografia mais leve */
.attention-panel {
  border-radius: 3px;
}

.attention-item,
.attention-item.normal,
.attention-item.medium,
.attention-item.high {
  border: 0;
  border-radius: 2px;
  box-shadow: none;
}

.attention-item,
.attention-item.normal {
  background: #f1f4f6;
}

.attention-item.medium {
  background: #f7f2e9;
}

/* V2.9.0 - Prospeccao B2B e contexto compacto */
.prospecting-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
}
.prospecting-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 94px;
  padding: 16px;
  border-right: 1px solid var(--line);
}
.prospecting-source:last-child { border-right: 0; }
.prospecting-source.is-active { background: #f1f7f5; }
.prospecting-source.is-planned { background: #fafbfc; }
.prospecting-source-icon { display: inline-flex; color: #47766e; }
.prospecting-source p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.prospecting-source form { margin: 0; }
.prospecting-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.prospecting-audiences { display: grid; gap: 8px; }
.prospecting-audience { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-soft); }
.prospecting-audience small,
.prospecting-table td small { display: block; margin-top: 4px; color: var(--muted); }
.prospecting-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.prospecting-details summary { color: #315f58; font-weight: 700; cursor: pointer; }
.prospecting-details[open] summary { margin-bottom: 14px; }
.prospecting-filters { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(130px, 1fr)) minmax(140px, .8fr) minmax(140px, .8fr) auto; gap: 8px; margin: 14px 0; }
.prospect-score { display: grid; gap: 5px; min-width: 90px; }
.prospect-score > span { display: block; width: 100%; height: 5px; background: #e3e9ec; overflow: hidden; }
.prospect-score i { display: block; height: 100%; background: #5d8d84; }
.prospect-convert-form { display: grid; justify-items: start; gap: 7px; min-width: 180px; }
.compact-check { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.compact-check input { width: auto; margin: 0; }
.pagination-wrap { margin-top: 14px; }

@media (max-width: 1250px) {
  .prospecting-sources { grid-template-columns: 1fr; }
  .prospecting-source { border-right: 0; border-bottom: 1px solid var(--line); }
  .prospecting-source:last-child { border-bottom: 0; }
  .prospecting-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .prospecting-workspace,
  .prospecting-filters { grid-template-columns: 1fr; }
  html.topbar-collapsed .topbar-compact-summary span { display: none; }
}

.pipedrive-health-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:14px; border:1px solid var(--line); }
.pipedrive-health-grid article { min-height:92px; padding:14px; border-right:1px solid var(--line); background:var(--panel-soft); }
.pipedrive-health-grid article:last-child { border-right:0; }
.pipedrive-health-grid article.attention { background:#f7f2e9; }
.pipedrive-health-grid article.danger { background:#fbefee; }
.pipedrive-health-grid span,.pipedrive-checkpoint span { display:block; color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.pipedrive-health-grid strong { display:block; margin:7px 0 3px; font-size:24px; font-weight:650; }
.pipedrive-health-grid small { color:var(--muted); }
.pipedrive-checkpoint { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px; padding:14px; background:#f4f7f8; border:1px solid var(--line); }
.pipedrive-checkpoint strong { display:block; margin-top:5px; font-size:13px; }
.pipedrive-failure-list { margin-top:16px; }
.pipedrive-failure-list article { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--line); }
.pipedrive-failure-list small { display:block; margin-top:4px; color:var(--muted); overflow-wrap:anywhere; }
@media(max-width:900px){.pipedrive-health-grid,.pipedrive-checkpoint{grid-template-columns:1fr}.pipedrive-health-grid article{border-right:0;border-bottom:1px solid var(--line)}.pipedrive-health-grid article:last-child{border-bottom:0}.pipedrive-failure-list article{align-items:flex-start;flex-direction:column}}

.attention-item.high {
  background: #f8eeee;
}

.attention-item:hover,
.attention-item.normal:hover {
  background: #e9eef1;
}

.attention-item.medium:hover {
  background: #f2eadc;
}

.attention-item.high:hover {
  background: #f3e3e3;
}

.attention-item:focus-visible {
  outline: 2px solid rgba(53, 107, 99, .3);
  outline-offset: 2px;
}

.attention-item.numeric .value,
.attention-item.textual .value {
  font-weight: 600;
}

.summary-facts div,
.signal-card,
.diagnostic-account,
.panel-subtle {
  border: 0;
  border-radius: 2px;
  background: #f1f4f6;
}

.metric-icon,
.signal-card .metric-icon,
.priority-avatar {
  width: 42px;
  height: 42px;
}

.icon {
  flex: 0 0 auto;
}

/* WhatsApp Business Hub - integração oficial Meta */
.wa-page-heading,
.wa-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.wa-page-heading { margin-bottom: 20px; }
.wa-page-heading h1 { margin: 4px 0 3px; }
.wa-section-heading h2 { margin: 0 0 3px; font-size: 18px; }
.eyebrow { color: #5f6f7c; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.back-link { display: inline-block; margin-bottom: 8px; color: #4f665f; font-size: 13px; font-weight: 600; }

.wa-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #dce2e7;
  border-radius: 3px;
  background: #dce2e7;
}

.wa-summary-item { min-height: 112px; padding: 18px 20px; background: #fff; }
.wa-summary-item > span { display: block; color: #65727d; font-size: 12px; font-weight: 600; }
.wa-summary-item > strong { display: block; margin: 5px 0 3px; color: #26333e; font-size: 26px; font-weight: 650; }
.wa-summary-item small, .wa-summary-item a { color: #65727d; font-size: 12px; }
.wa-summary-item.is-positive { background: #edf4f1; }
.wa-summary-item.is-attention { background: #f7f3ea; }

.wa-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 0;
  border-radius: 2px;
  background: #edf2f4;
  color: #34434e;
}

.wa-callout.is-attention { background: #f7f2e8; }
.wa-callout > div:nth-child(2) { flex: 1; }
.wa-callout p { margin: 3px 0 0; color: #68747e; font-size: 13px; }
.wa-callout-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; color: #4d6962; background: rgba(255,255,255,.7); }
.wa-callout.compact { align-items: flex-start; margin: 18px 0 0; padding: 12px; }

.wa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; align-items: start; }
.wa-main-column, .wa-side-column { display: grid; gap: 14px; }
.wa-side-column { position: sticky; top: 78px; }

.wa-account-card { padding: 18px; border: 1px solid #dce2e7; border-radius: 3px; background: #fff; }
.wa-account-identity { display: flex; gap: 13px; align-items: flex-start; }
.wa-account-icon, .wa-empty-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; color: #356b63; background: #edf4f1; }
.wa-account-identity h3 { margin: 0; font-size: 17px; }
.wa-account-identity p { margin: 3px 0; color: #465560; }
.wa-account-identity small { color: #77828b; }

.wa-account-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 16px 0; background: #e3e7ea; }
.wa-account-facts > div { min-height: 66px; padding: 11px 12px; background: #f4f6f7; }
.wa-account-facts span, .wa-account-facts strong { display: block; }
.wa-account-facts span { margin-bottom: 4px; color: #75818a; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.wa-account-facts strong { color: #34414c; font-size: 13px; font-weight: 600; }
.wa-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-account-actions form { margin: 0; }
.wa-inline-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 2px; background: #f8eeee; color: #8b3a36; font-size: 13px; }

.wa-register-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e7ea; }
.wa-register-details summary { cursor: pointer; color: #53636e; font-size: 13px; font-weight: 600; }
.wa-inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 12px; background: #f4f6f7; }
.wa-inline-form label { display: block; margin-bottom: 5px; font-size: 12px; }
.wa-inline-form input { width: 150px; }
.wa-inline-form small { width: 100%; color: #74808a; }

.wa-empty-state { padding: 42px 24px; border: 1px solid #dce2e7; border-radius: 3px; background: #fff; text-align: center; }
.wa-empty-state .wa-empty-icon { margin: 0 auto 14px; }
.wa-empty-state h2 { margin: 0 0 6px; }
.wa-empty-state p { max-width: 520px; margin: 0 auto 18px; color: #68747e; }

.wa-readiness-panel h2, .wa-technical-panel h2, .wa-connect-help h2 { margin: 5px 0 14px; font-size: 18px; }
.wa-checklist { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.wa-checklist li { display: flex; gap: 10px; }
.wa-checklist li > span { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; background: #edf2f4; color: #53636e; font-size: 12px; font-weight: 700; }
.wa-checklist strong, .wa-checklist small { display: block; }
.wa-checklist strong { font-size: 13px; }
.wa-checklist small { margin-top: 2px; color: #76818a; line-height: 1.35; }
.wa-technical-panel code { display: block; overflow-wrap: anywhere; padding: 10px; background: #f1f4f6; color: #45545f; font-size: 11px; }
.wa-technical-panel dl { margin: 14px 0 0; }
.wa-technical-panel dl div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e5e9ec; font-size: 12px; }
.wa-technical-panel dl div:last-child { border-bottom: 0; }
.wa-technical-panel dt { color: #74808a; }
.wa-technical-panel dd { margin: 0; font-weight: 600; text-align: right; }

.wa-connect-layout { display: grid; grid-template-columns: minmax(0, 680px) minmax(260px, 360px); gap: 18px; align-items: start; }
.wa-connect-panel { padding: 26px; }
.wa-meta-lockup { display: flex; gap: 12px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #e3e7ea; }
.wa-meta-mark { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: #356b63; font-size: 19px; font-weight: 700; }
.wa-meta-lockup strong, .wa-meta-lockup small { display: block; }
.wa-meta-lockup small { margin-top: 2px; color: #78838c; }
.wa-choice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.wa-choice-list > div { display: flex; gap: 11px; min-height: 92px; padding: 14px; background: #f1f4f6; color: #4d5e68; }
.wa-choice-list strong, .wa-choice-list small { display: block; }
.wa-choice-list strong { color: #2f3d47; }
.wa-choice-list small { margin-top: 4px; line-height: 1.4; }
.wa-meta-button { width: 100%; margin-top: 20px; min-height: 44px; }
.wa-privacy-note { margin: 12px 0 0; color: #77828b; font-size: 12px; line-height: 1.45; text-align: center; }
.wa-connect-status { margin-top: 14px; padding: 11px 12px; border-radius: 2px; background: #edf2f4; color: #475965; font-size: 13px; }
.wa-connect-status.is-success { background: #edf4f1; color: #315f56; }
.wa-connect-status.is-error { background: #f8eeee; color: #8b3a36; }
.wa-connect-help ul { margin: 0; padding-left: 19px; color: #5d6b75; }
.wa-connect-help li { margin: 9px 0; line-height: 1.4; }
.wa-profile-panel { max-width: 900px; }

@media (max-width: 1050px) {
  .wa-layout, .wa-connect-layout { grid-template-columns: 1fr; }
  .wa-side-column { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .wa-page-heading, .wa-callout { align-items: stretch; flex-direction: column; }
  .wa-summary-grid, .wa-choice-list, .wa-side-column { grid-template-columns: 1fr; }
  .wa-account-facts { grid-template-columns: 1fr 1fr; }
  .wa-account-actions .btn, .wa-account-actions form, .wa-account-actions form .btn { width: 100%; }
}

/* Central de integrações e Zoom */
.integration-provider-card.is-planned { background: #f7f8f8; }
.integration-provider-card.is-planned .integration-provider-icon { color: #7b898d; background: #edf0f1; }
.integration-card-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.integration-card-title h2 { margin: 0; }
.zoom-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; overflow: hidden; margin-bottom: 16px; border: 1px solid #dbe2e6; border-radius: 3px; background: #dbe2e6; }
.zoom-summary-grid article { min-height: 105px; padding: 17px; background: #fff; }
.zoom-summary-grid span,.zoom-summary-grid strong,.zoom-summary-grid small { display: block; }
.zoom-summary-grid span { color: #75828a; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.zoom-summary-grid strong { margin-top: 7px; color: #2e403c; font-size: 20px; }
.zoom-summary-grid small { margin-top: 5px; color: #7b878e; line-height: 1.35; }
.zoom-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; margin-bottom: 16px; }
.zoom-create-card .flow-section-heading { margin-bottom: 16px; }
.zoom-webhook-card { position: sticky; top: 76px; }
.zoom-webhook-card h2 { margin: 4px 0 9px; }
.zoom-webhook-card > p { color: #68757e; line-height: 1.45; }
.zoom-webhook-card code { display: block; overflow-wrap: anywhere; padding: 10px; background: #f1f4f5; color: #475860; font-size: 11px; }
.zoom-webhook-status { display: flex; gap: 9px; margin-top: 13px; padding: 11px; color: #3e5f57; background: #edf4f1; }
.zoom-webhook-status .agent-live-dot { flex: 0 0 auto; margin-top: 5px; }
.zoom-webhook-status strong,.zoom-webhook-status small { display: block; }
.zoom-webhook-status small { margin-top: 3px; color: #687a74; line-height: 1.35; }
.zoom-crm-note { padding: 12px; color: #526660; background: #f0f4f3; }
.zoom-crm-note p { margin: 4px 0 0; color: #6d7a7e; font-size: 12px; line-height: 1.4; }
.zoom-meetings-panel { margin-bottom: 16px; }
.zoom-meetings-panel > .flow-section-heading { margin-bottom: 14px; }
.block { display: block; margin-top: 3px; }
@media(max-width:1050px){.zoom-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.zoom-layout{grid-template-columns:1fr}.zoom-webhook-card{position:static}}
@media(max-width:650px){.zoom-summary-grid{grid-template-columns:1fr}}

/* CRM opcional e interoperabilidade com Pipedrive */
.crm-heading,.pipedrive-heading { margin-bottom: 18px; }
.crm-heading h1,.pipedrive-heading h1 { margin: 4px 0; }
.crm-metric-grid,.pipedrive-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin-bottom: 16px; border: 1px solid #dbe2e6; border-radius: 3px; background: #dbe2e6; overflow: hidden; }
.crm-metric-grid article,.pipedrive-summary-grid article { min-height: 105px; padding: 17px; background: #fff; }
.crm-metric-grid span,.pipedrive-summary-grid article > span { display: block; color: #76828a; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.crm-metric-grid strong,.pipedrive-summary-grid strong { display: block; margin: 8px 0 4px; color: #2f3d47; font-size: 23px; }
.pipedrive-summary-grid strong { font-size: 16px; }
.pipedrive-summary-grid small:not(.badge) { display: block; color: #78848c; font-size: 11px; line-height: 1.35; }
.crm-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; margin-bottom: 16px; align-items: start; }
.crm-connection-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #e3e8ea; }
.crm-connection-row:last-child { border-bottom: 0; }
.crm-connection-row strong,.crm-connection-row small { display: block; }
.crm-connection-row small { margin-top: 3px; color: #78848c; }
.crm-roadmap-card h2 { margin: 4px 0 14px; }
.crm-roadmap-card ol { margin: 0; padding: 0; list-style: none; counter-reset: crm-roadmap; }
.crm-roadmap-card li { position: relative; min-height: 60px; padding: 0 0 15px 42px; counter-increment: crm-roadmap; }
.crm-roadmap-card li::before { position: absolute; left: 0; top: 0; display: grid; width: 29px; height: 29px; place-items: center; color: #3e665d; background: #eaf2ef; content: counter(crm-roadmap); font-size: 12px; font-weight: 700; }
.crm-roadmap-card li:not(:last-child)::after { position: absolute; left: 14px; top: 30px; bottom: 0; width: 1px; background: #d7e0dd; content: ''; }
.crm-roadmap-card li strong,.crm-roadmap-card li span { display: block; }
.crm-roadmap-card li span { margin-top: 3px; color: #748089; font-size: 12px; line-height: 1.4; }
.crm-history { margin-top: 16px; }
.pipedrive-alert { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 11px; margin-bottom: 16px; padding: 13px 15px; color: #5e5035; background: #f5f0e6; }
.pipedrive-alert strong,.pipedrive-alert p { display: block; margin: 0; }
.pipedrive-alert p { margin-top: 2px; color: #776a50; font-size: 12px; }
.pipedrive-action-grid,.pipedrive-ledger-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.pipedrive-action-card h2 { margin: 4px 0 7px; }
.pipedrive-action-card h3 { margin: 4px 0 7px; color: #2f3d47; font-size: 17px; }
.pipedrive-action-card > p { min-height: 42px; color: #6d7982; font-size: 13px; line-height: 1.45; }
.pipedrive-crm-hub,.pipedrive-contacts-hub { margin-bottom: 16px; }
.pipedrive-action-card.inset { padding: 17px; border: 1px solid #dfe5e7; background: #fbfcfc; }
.pipedrive-action-card.inset .form-grid { margin-top: 13px; }
.pipedrive-alert.subtle { color: #4f6268; background: #edf2f2; }
.pipedrive-alert.subtle p { color: #687a80; }
.conflict-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 210px; }
.conflict-actions form { margin: 0; }
.pipedrive-preview { margin-bottom: 16px; }
.pipedrive-preview-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.pipedrive-preview-counts span { padding: 5px 7px; color: #596771; background: #eef1f3; font-size: 11px; }
.pipedrive-preview-counts .ok { color: #315d54; background: #e7f2ed; }
.pipedrive-preview-counts .attention { color: #775735; background: #f6ecdc; }
.table-subline { display: block; margin-top: 3px; color: #89939a; }
.pipedrive-confirm-import { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 13px; background: #f2f5f5; }
.pipedrive-confirm-import .check-row { flex: 1; }
.pipedrive-ledger-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #e3e8ea; }
.pipedrive-ledger-row:last-child { border-bottom: 0; }
.pipedrive-ledger-row strong,.pipedrive-ledger-row small { display: block; }
.pipedrive-ledger-row small { margin-top: 3px; color: #7c878e; font-size: 11px; }
.flow-empty.compact { padding: 24px 12px; }
@media(max-width:1000px){.crm-metric-grid,.pipedrive-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-layout,.pipedrive-action-grid,.pipedrive-ledger-grid{grid-template-columns:1fr}}
@media(max-width:650px){.crm-metric-grid,.pipedrive-summary-grid{grid-template-columns:1fr}.crm-connection-row{grid-template-columns:42px minmax(0,1fr)}.crm-connection-row>.badge,.crm-connection-row>.btn{grid-column:2}.pipedrive-confirm-import{align-items:stretch;flex-direction:column}}

/* CRM comercial nativo */
.crm-toolbar { position: relative; display: grid; grid-template-columns: auto minmax(160px,1fr) auto; align-items: end; gap: 18px; margin-bottom: 14px; padding: 13px 15px; }
.crm-toolbar > form { display: flex; align-items: end; gap: 9px; }
.crm-toolbar label { min-width: 180px; }
.crm-toolbar label,.crm-toolbar > div strong,.crm-toolbar > div small { display: block; }
.crm-toolbar > div small { margin-top: 3px; color: #77838b; }
.crm-config { position: relative; }
.crm-config summary { list-style: none; cursor: pointer; }
.crm-config summary::-webkit-details-marker { display: none; }
.crm-config-popover { position: absolute; z-index: 40; top: calc(100% + 7px); right: 0; display: grid; width: 620px; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; border: 1px solid #d5dde1; border-radius: 3px; background: #fff; box-shadow: 0 15px 42px rgba(35,48,57,.18); }
.crm-new-pipeline { padding-left: 16px; border-left: 1px solid #e1e6e8; }
.crm-kanban { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 10px; align-items: start; }
.crm-stage { min-width: 0; border: 1px solid #dce2e5; border-radius: 3px; background: #f1f4f4; }
.crm-stage > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-top: 3px solid var(--stage-color); background: #fff; }
.crm-stage > header strong,.crm-stage > header small { display: block; }
.crm-stage > header small { margin-top: 2px; color: #7a858c; font-size: 10px; }
.crm-stage > header > span { display: grid; min-width: 25px; height: 25px; place-items: center; color: #63717a; background: #edf1f2; font-size: 11px; font-weight: 700; }
.crm-stage-cards { min-height: 150px; padding: 8px; transition: background .15s ease; }
.crm-stage-cards.is-over { background: #e3eeea; }
.crm-opportunity-card { margin-bottom: 8px; border: 1px solid #dce2e4; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(38,50,59,.04); }
.crm-opportunity-card[draggable=true] { cursor: grab; }
.crm-opportunity-card.is-dragging { opacity: .42; }
.crm-opportunity-card > a { display: block; padding: 12px; color: inherit; text-decoration: none; }
.crm-opportunity-card strong,.crm-opportunity-card small,.crm-card-value { display: block; }
.crm-opportunity-card strong { color: #2d3b45; font-size: 13px; line-height: 1.35; }
.crm-card-value { margin: 8px 0 5px; color: #315d54; font-size: 15px; font-weight: 700; }
.crm-opportunity-card small { color: #76828a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #edf0f1; color: #7b868d; font-size: 10px; }
.crm-next-activity { margin-top: 8px; padding: 6px 7px; color: #49665f; background: #edf4f1; font-size: 10px; line-height: 1.35; }
.crm-next-activity.is-overdue { color: #784943; background: #f7ecea; }
.crm-stage-empty { padding: 30px 8px; color: #98a1a7; font-size: 11px; text-align: center; }
.crm-move-feedback { position: fixed; z-index: 1300; right: 22px; bottom: 22px; padding: 10px 14px; color: #fff; background: #315d54; box-shadow: 0 8px 22px rgba(34,47,55,.2); font-size: 12px; }
.crm-opportunity-form { max-width: 880px; }
.crm-detail-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; margin-bottom: 16px; border: 1px solid #dce2e5; background: #dce2e5; }
.crm-detail-summary article { min-height: 88px; padding: 14px; background: #fff; }
.crm-detail-summary span,.crm-detail-summary strong,.crm-detail-summary a { display: block; }
.crm-detail-summary span { color: #7b868d; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.crm-detail-summary strong { margin-top: 7px; color: #34424c; }
.crm-detail-summary a { margin-top: 4px; color: #456f65; font-size: 11px; }
.crm-status-won { color: #2f745d !important; }.crm-status-lost { color: #87504a !important; }
.crm-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; }
.crm-detail-main,.crm-detail-side { display: grid; gap: 16px; }
.crm-detail-side { position: sticky; top: 76px; }
.crm-detail-side h2 { margin: 4px 0 13px; }
.crm-activity { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: start; gap: 11px; padding: 13px 0; border-bottom: 1px solid #e3e8ea; }
.crm-activity:last-child { border-bottom: 0; }.crm-activity.is-done { opacity: .62; }
.crm-activity-icon { display: grid; width: 36px; height: 36px; place-items: center; color: #466a62; background: #eaf2ef; }
.crm-activity strong,.crm-activity small { display: block; }.crm-activity small { margin-top: 3px; color: #7a858d; font-size: 11px; }.crm-activity p { margin: 7px 0 0; color: #637079; font-size: 12px; }
.crm-whatsapp-panel { overflow: hidden; }
.crm-whatsapp-notice { padding: 14px 16px; color: #5e6e68; background: #eef3f1; }
.crm-whatsapp-notice strong,.crm-whatsapp-notice p { display: block; margin: 0; }
.crm-whatsapp-notice p { margin-top: 4px; font-size: 12px; }
.crm-whatsapp-conversations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 16px; }
.crm-whatsapp-conversations > article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid #dfe7e3; background: #f7faf9; }
.crm-whatsapp-conversations > article > a { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; color: #31413d; text-decoration: none; }
.crm-whatsapp-conversations > article:hover { border-color: #a9c1ba; background: #f0f6f3; }
.crm-whatsapp-conversations > article > a > span:first-child { display: grid; width: 32px; height: 32px; place-items: center; color: #3f7064; background: #e5f0ec; }
.crm-whatsapp-conversations strong,.crm-whatsapp-conversations small { display: block; }
.crm-whatsapp-conversations small { margin-top: 3px; color: #71807a; font-size: 11px; }
.crm-whatsapp-composer { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid #dce6e2; background: #f6f9f8; }
.crm-whatsapp-composer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.crm-whatsapp-composer-grid label { display: grid; gap: 5px; color: #4b5a55; font-size: 11px; font-weight: 600; }
.crm-whatsapp-composer-grid .span-2 { grid-column: span 2; }
.crm-whatsapp-parameters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.crm-whatsapp-preview { min-height: 130px; padding: 14px; align-self: stretch; color: #263b34; border: 1px solid #d2e4da; background: #dcf8e8; font-size: 12px; line-height: 1.5; white-space: normal; }
.crm-whatsapp-composer-actions { display: flex; grid-column: 1/-1; align-items: center; justify-content: space-between; gap: 14px; padding-top: 2px; }
.crm-whatsapp-composer-actions small { color: #697771; }
.crm-whatsapp-timeline { display: grid; gap: 7px; max-height: 360px; padding: 14px; overflow: auto; border-top: 1px solid #e2e8e5; background: #f5f7f6; }
.crm-whatsapp-timeline article { width: min(78%,620px); padding: 10px 12px; border: 1px solid #dfe5e2; background: #fff; }
.crm-whatsapp-timeline article.outbound { justify-self: end; border-color: #d1e5da; background: #e9f5ee; }
.crm-whatsapp-timeline article > div { display: flex; justify-content: space-between; gap: 12px; }
.crm-whatsapp-timeline strong { color: #40534d; font-size: 11px; }
.crm-whatsapp-timeline small { color: #7b8984; font-size: 10px; }
.crm-whatsapp-timeline p { margin: 6px 0 0; color: #374640; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.conversation-crm-context { display: grid; gap: 8px; }
.conversation-crm-context h2 { margin: 0 0 3px; }
.conversation-crm-context > a { display: block; padding: 10px 11px; color: #34443f; border: 1px solid #dfe6e3; background: #f7faf9; text-decoration: none; }
.conversation-crm-context > a:hover { border-color: #a9c1ba; background: #eff5f2; }
.conversation-crm-context strong,.conversation-crm-context small { display: block; }
.conversation-crm-context small { margin-top: 3px; color: #72807b; font-size: 10px; line-height: 1.4; }
.crm-event-timeline article { position: relative; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; padding-bottom: 17px; }
.crm-event-timeline article > span::before { display: block; width: 9px; height: 9px; margin: 4px auto 0; border: 2px solid #64857d; border-radius: 50%; background: #fff; content: ''; }
.crm-event-timeline article:not(:last-child) > span::after { position: absolute; top: 15px; bottom: 0; left: 11px; width: 1px; background: #d5ddda; content: ''; }
.crm-event-timeline strong,.crm-event-timeline small { display: block; }.crm-event-timeline small { margin-top: 3px; color: #7a858d; font-size: 11px; }.crm-event-timeline p { margin: 5px 0 0; color: #64717a; font-size: 12px; }
.crm-loss-card { background: #fbf9f6; }.crm-description { margin: 10px 0 0; color: #596872; line-height: 1.55; white-space: pre-wrap; }
@media(max-width:1100px){.crm-detail-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.crm-detail-grid{grid-template-columns:1fr}.crm-detail-side{position:static}.crm-toolbar{grid-template-columns:1fr}.crm-toolbar>form{flex-wrap:wrap}.crm-config{justify-self:start}.crm-config-popover{right:auto;left:0}}
@media(max-width:700px){.crm-detail-summary{grid-template-columns:1fr}.crm-config-popover{position:fixed;top:80px;right:12px;left:12px;width:auto;grid-template-columns:1fr;max-height:calc(100vh - 100px);overflow:auto}.crm-new-pipeline{padding:16px 0 0;border-top:1px solid #e1e6e8;border-left:0}.crm-activity{grid-template-columns:38px minmax(0,1fr)}.crm-activity>form,.crm-activity>.badge{grid-column:2}.crm-toolbar label{min-width:140px}.crm-whatsapp-conversations{grid-template-columns:1fr}.crm-whatsapp-timeline article{width:92%}.crm-whatsapp-timeline article>div{display:block}.crm-whatsapp-composer{grid-template-columns:1fr}.crm-whatsapp-composer-grid{grid-template-columns:1fr}.crm-whatsapp-composer-grid .span-2{grid-column:auto}.crm-whatsapp-parameters{grid-template-columns:1fr}.crm-whatsapp-composer-actions{display:grid}}

/* Operador IA flutuante: planos, atividade e autorizações supervisionadas */
.agent-operator { position: fixed; z-index: 1500; left: calc((var(--sidebar-width,244px) - 58px)/2); right: auto; bottom: 108px; transition: left .18s ease,bottom .18s ease; }
body.sidebar-collapsed .agent-operator { left: calc((var(--sidebar-collapsed-width,76px) - 58px)/2); bottom: 22px; }
body.sidebar-collapsed .agent-operator-panel { max-height: min(760px,calc(100vh - 110px)); }
.agent-avatar-button { position: relative; display: grid; width: 58px; height: 58px; padding: 0; place-items: center; border: 1px solid #315e55; border-radius: 50%; color: #fff; background: #315e55; box-shadow: 0 12px 30px rgba(34,54,61,.24); cursor: pointer; }
.agent-avatar-button:hover,.agent-avatar-button[aria-expanded="true"] { background: #274f47; transform: translateY(-1px); }
.agent-avatar-face { position: relative; display: block; width: 32px; height: 29px; border: 1px solid rgba(255,255,255,.72); border-radius: 11px 11px 9px 9px; }
.agent-avatar-face i,.agent-avatar-mini i { position: absolute; top: 10px; width: 3px; height: 5px; border-radius: 2px; background: currentColor; }
.agent-avatar-face i:first-child,.agent-avatar-mini i:first-child { left: 8px; }.agent-avatar-face i:nth-child(2),.agent-avatar-mini i:nth-child(2) { right: 8px; }
.agent-avatar-face b { position: absolute; right: 8px; bottom: 6px; left: 8px; height: 1px; background: currentColor; opacity: .75; }
.agent-avatar-status { position: absolute; right: 1px; bottom: 2px; width: 13px; height: 13px; border: 3px solid #f7f9fc; border-radius: 50%; background: #53bd8d; }
.agent-avatar-count { position: absolute; right: -5px; top: -5px; min-width: 21px; height: 21px; padding: 0 5px; border: 2px solid #f7f9fc; border-radius: 11px; color: #fff; background: #b44f4a; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }
.agent-operator-panel { position: absolute; left: 0; right: auto; bottom: 70px; display: grid; width: min(440px,calc(100vw - 28px)); max-height: min(680px,calc(100vh - 196px)); grid-template-rows: auto auto auto auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid #cfd8dc; border-radius: 5px; color: #26343e; background: #fff; box-shadow: 0 22px 60px rgba(31,45,54,.25); }
.agent-operator-panel[hidden] { display: none; }
.agent-operator-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px; color: #fff; background: #263c48; }
.agent-operator-panel > header > button { width: 30px; height: 30px; padding: 0; border: 0; color: #dbe5e8; background: transparent; font-size: 24px; cursor: pointer; }
.agent-identity { display: flex; align-items: center; gap: 10px; }.agent-identity strong,.agent-identity small { display: block; }.agent-identity small { margin-top: 2px; color: #b9c9ce; font-size: 11px; }
.agent-avatar-mini { position: relative; width: 32px; height: 30px; border: 1px solid #9db8b2; border-radius: 10px 10px 8px 8px; color: #dff1ec; }
.agent-mode-tabs { display: flex; border-bottom: 1px solid #e0e6e9; background: #f7f9f9; }.agent-mode-tabs button { flex: 1; padding: 10px; border: 0; border-bottom: 2px solid transparent; color: #65747d; background: transparent; font: inherit; font-size: 12px; font-weight: 600; }.agent-mode-tabs button.is-active { border-bottom-color: #477268; color: #315f56; background: #fff; }.agent-mode-tabs button:disabled { opacity: .45; }
.agent-command-form { display: grid; gap: 7px; padding: 12px 14px; border-bottom: 1px solid #e1e7e9; background: #fff; }.agent-command-form > label { color: #3f5059; font-size: 12px; font-weight: 700; }.agent-command-form textarea { min-height: 64px; max-height: 140px; resize: vertical; border-radius: 2px; font-size: 12px; line-height: 1.4; }.agent-command-form > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.agent-command-form small { max-width: 245px; color: #76838a; font-size: 10px; line-height: 1.35; }.agent-command-form button { flex: 0 0 auto; }
.agent-command-form .agent-suggestions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 5px; }.agent-suggestions button { padding: 4px 7px; border: 1px solid #d7dfe1; border-radius: 3px; color: #52636b; background: #f8faf9; font: inherit; font-size: 9px; cursor: pointer; }.agent-suggestions button:hover { border-color: #9fb8b2; color: #315f56; background: #eef5f2; }
.agent-feedback { margin: 0; padding: 8px 14px; color: #3f665e; background: #edf5f2; font-size: 11px; }.agent-feedback.is-error { color: #8a4641; background: #f8eceb; }
.agent-operator-panel [data-agent-state] { min-height: 220px; overflow-y: auto; }
.agent-state-content { display: grid; gap: 14px; padding: 14px; }
.agent-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #5d6b74; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.agent-section-title b { padding: 2px 6px; border-radius: 9px; color: #fff; background: #7e6239; }
.agent-approval-inbox { padding: 11px; background: #f8f3e9; }.agent-approval-group { margin-bottom: 10px; }.agent-approval-group > div strong,.agent-approval-group > div small { display: block; }.agent-approval-group > div small { margin-top: 3px; color: #6e675b; font-size: 11px; line-height: 1.35; }
.agent-approval-option { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 8px; margin-top: 8px; padding: 9px; background: rgba(255,255,255,.72); cursor: pointer; }.agent-approval-option input { width: auto; margin-top: 3px; }.agent-approval-option strong,.agent-approval-option small { display: block; }.agent-approval-option small { margin-top: 2px; color: #727b80; font-size: 11px; }.agent-approval-option em { color: #846b43; font-size: 9px; font-style: normal; font-weight: 700; }
.agent-decision-note { display: grid; gap: 4px; margin: 9px 0; color: #68747c; font-size: 11px; }.agent-decision-note textarea { min-height: 54px; padding: 8px; font-size: 12px; }
.agent-plan-list { min-width: 0; }.agent-plan-card { margin-bottom: 7px; border: 1px solid #dfe5e8; background: #fff; }.agent-plan-card summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; cursor: pointer; list-style: none; }.agent-plan-card summary::-webkit-details-marker { display: none; }.agent-plan-card summary span { min-width: 0; }.agent-plan-card summary strong,.agent-plan-card summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.agent-plan-card summary small { margin-top: 2px; color: #849098; font-size: 10px; }.agent-plan-card summary em { flex: 0 0 auto; padding: 3px 6px; color: #586a72; background: #eef2f3; font-size: 9px; font-style: normal; }
.agent-plan-card > p { margin: 0; padding: 0 10px 9px; color: #64727b; font-size: 12px; line-height: 1.4; }.agent-plan-request { margin: 0 10px 7px; padding: 8px 9px; color: #536169; background: #f3f5f6; }.agent-plan-request strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; color: #75828a; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }.agent-plan-request strong span { color: #547269; font-size: 8px; font-weight: 600; letter-spacing: 0; text-transform: none; }.agent-plan-request p { margin: 0; font-size: 11px; line-height: 1.4; }.agent-plan-request button { margin-top: 6px; padding: 0; border: 0; color: #356d62; background: transparent; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }.agent-plan-response { margin: 0 10px 7px; padding: 8px 9px; color: #49635e; background: #eef4f2; font-size: 11px; line-height: 1.4; }.agent-plan-card ol { margin: 0; padding: 5px 10px 10px; list-style: none; }.agent-plan-card li { display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 8px; padding: 7px 0; border-top: 1px solid #edf0f2; }.agent-plan-card li > span { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #a9b4b9; }.agent-plan-card li.is-completed > span,.agent-plan-card li.is-ready > span { background: #4f8b7d; }.agent-plan-card li.is-waiting_input > span,.agent-plan-card li.is-waiting_approval > span { background: #b08a4e; }.agent-plan-card li.is-blocked > span,.agent-plan-card li.is-failed > span { background: #a95c57; }.agent-plan-card li strong,.agent-plan-card li small { display: block; }.agent-plan-card li strong { font-size: 12px; }.agent-plan-card li small { margin-top: 2px; color: #79868d; font-size: 10px; }.agent-plan-card li p { margin: 5px 0 0; color: #5f6e76; font-size: 11px; line-height: 1.4; }.agent-plan-card li a { display: inline-block; margin-top: 5px; color: #356d62; font-size: 11px; font-weight: 700; }.agent-plan-card > form { padding: 0 10px 11px 28px; }
.agent-input-form { display: grid; gap: 8px; margin-top: 10px; padding: 11px; border: 1px solid #d8e1df; background: #f6f9f8; }.agent-input-form > b { color: #3e5550; font-size: 12px; }.agent-input-form > p { margin: -3px 0 2px !important; }.agent-input-form label { margin: 0; color: #5b696f; font-size: 10px; }.agent-input-form label em { color: #98703d; font-size: 8px; font-style: normal; text-transform: uppercase; }.agent-input-form input,.agent-input-form select,.agent-input-form textarea { min-height: 34px; margin-top: 4px; padding: 7px 8px; border-radius: 2px; font-size: 11px; }.agent-input-form textarea { min-height: 72px; resize: vertical; }.agent-input-form .btn { justify-self: start; }
.agent-input-form .agent-confirm-field { display: flex; align-items: flex-start; gap: 7px; margin-top: 5px; padding: 8px; color: #684f2f; background: #f6efe4; font-size: 10px; line-height: 1.35; }.agent-input-form .agent-confirm-field input { flex: 0 0 auto; width: auto; min-height: 0; margin: 2px 0 0; padding: 0; }
.agent-empty-state { padding: 28px 18px; color: #708089; text-align: center; background: #f5f7f7; }.agent-empty-state strong { display: block; margin-top: 8px; color: #40515b; }.agent-empty-state p { margin: 5px auto 0; max-width: 300px; font-size: 12px; line-height: 1.45; }
.agent-operator-panel > footer { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-top: 1px solid #e2e7e9; color: #77848b; background: #f7f9f9; font-size: 10px; }.agent-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #53a884; }
@media(max-width:1000px){.agent-operator,body.sidebar-collapsed .agent-operator{left:14px;right:auto}}
@media(max-width:600px){.agent-operator,body.sidebar-collapsed .agent-operator{left:14px;right:auto;bottom:14px}.agent-operator-panel{position:fixed;right:10px;bottom:82px;left:10px;width:auto;max-height:calc(100vh - 100px)}}

.user-permissions-editor { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.user-permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.user-permission-card { padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: #f8faf9; }
.user-permission-customize { padding-bottom: 8px; border-bottom: 1px solid #e3e8e6; }
.user-permission-customize span strong,.user-permission-customize span small { display: block; }.user-permission-customize span small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 400; }
.user-permission-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 12px; margin-top: 8px; padding-left: 25px; }
@media(max-width:900px){.user-permission-grid{grid-template-columns:1fr}}

/* Templates: identificação interna e prévia rápida */
.template-name-cell { min-width: 330px; }
.template-title-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.template-meta-name { margin-top: 2px; font-size: 12px; }
.template-description { max-width: 420px; margin: 7px 0 0; color: #56646f; font-size: 13px; line-height: 1.35; }
.template-description.is-empty { color: #98a1a9; font-style: italic; }
.template-preview-trigger {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid #dce2e7;
  border-radius: 2px;
  background: #f5f7f8;
  color: #52656d;
  cursor: pointer;
}
.template-preview-trigger:hover,
.template-preview-trigger:focus-visible,
.template-preview-trigger[aria-expanded="true"] { border-color: #9fb8b2; background: #edf4f1; color: #356b63; outline: 0; }
.btn.icon-only { width: 32px; padding-inline: 0; }

.template-quick-preview {
  position: fixed;
  z-index: 1200;
  overflow: hidden;
  border: 1px solid #cfd7dc;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(37, 49, 61, .18);
}
.template-quick-preview[hidden] { display: none; }
.wa-template-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-bottom: 1px solid #dde3e7; background: #fff; }
.wa-template-card-head strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.wa-template-card-head small { flex: 0 0 auto; color: #7a858d; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.wa-template-chat {
  min-height: 175px;
  max-height: 390px;
  overflow-y: auto;
  padding: 18px 15px;
  background-color: #efeae2;
  background-image: linear-gradient(45deg, rgba(88, 113, 102, .025) 25%, transparent 25%), linear-gradient(-45deg, rgba(88, 113, 102, .025) 25%, transparent 25%);
  background-size: 18px 18px;
}
.wa-template-bubble { position: relative; max-width: 92%; margin-left: auto; padding: 9px 10px 18px; border-radius: 4px 1px 4px 4px; background: #d9fdd3; color: #17251f; box-shadow: 0 1px 1px rgba(35, 50, 44, .12); }
.wa-template-header { display: block; margin-bottom: 5px; font-size: 13px; }
.wa-template-body { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.42; }
.wa-template-footer { display: block; margin-top: 6px; padding-right: 38px; color: #697970; font-size: 11px; }
.wa-template-time { position: absolute; right: 8px; bottom: 4px; color: #728078; font-size: 9px; }
.wa-template-time b { color: #3995c7; font-weight: 700; }
.wa-template-media { display: grid; min-height: 110px; margin: -5px -6px 8px; place-items: center; align-content: center; gap: 5px; border-radius: 2px; background: #cbd8cf; color: #617169; font-size: 11px; }
.wa-template-action { width: 92%; margin: 2px 0 0 auto; padding: 8px 10px; border-radius: 3px; background: #fff; color: #1681a6; font-size: 12px; font-weight: 600; text-align: center; box-shadow: 0 1px 1px rgba(35, 50, 44, .1); }
.wa-template-card-foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid #dde3e7; color: #74808a; background: #fff; font-size: 10px; }

.template-metadata-dialog { width: min(520px, calc(100vw - 30px)); padding: 0; border: 1px solid #cfd7dc; border-radius: 3px; background: #fff; color: #25313d; box-shadow: 0 20px 60px rgba(28, 39, 49, .25); }
.template-metadata-dialog::backdrop { background: rgba(29, 40, 50, .48); }
.template-metadata-dialog form { padding: 20px; gap: 16px; }
.template-metadata-dialog .dialog-heading h2 { margin: 4px 0 0; font-size: 17px; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .template-name-cell { min-width: 280px; }
  .template-quick-preview { left: 12px !important; right: 12px; width: auto !important; }
}

/* Fluxos e integrações: superfícies sóbrias, baixa curvatura e hierarquia operacional */
.flow-page-heading { margin-bottom: 18px; }
.flow-page-heading h1 { margin: 4px 0; }
.flow-title-line { display: flex; align-items: center; gap: 10px; }
.flow-title-line h1 { margin: 0; }
.flow-mode-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; overflow: hidden; margin: 0 0 16px; border: 1px solid #dbe2e6; border-radius: 3px; background: #dbe2e6; }
.flow-mode-grid article { display: flex; min-height: 112px; gap: 13px; padding: 17px; background: #fff; }
.flow-mode-grid article > span { color: #476b63; }
.flow-mode-grid strong,.flow-mode-grid small { display: block; }
.flow-mode-grid strong { margin-bottom: 5px; color: #293741; }
.flow-mode-grid small { color: #73808a; line-height: 1.4; }
.flow-filters { grid-template-columns: 2fr 1fr 1fr auto; margin-bottom: 14px; }
.flow-table td:first-child { min-width: 260px; }
.flow-table td:first-child small { display: block; margin-top: 4px; color: #77838c; }
.flow-create-panel { max-width: 940px; }
.flow-type-choice { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.flow-type-choice > label { cursor: pointer; }
.flow-type-choice input { position: absolute; opacity: 0; }
.flow-type-choice label > span { display: flex; min-height: 150px; flex-direction: column; gap: 7px; padding: 16px; border: 1px solid #dce2e7; border-radius: 2px; color: #57656f; background: #f7f8f9; }
.flow-type-choice label > span strong { color: #2e3b45; }
.flow-type-choice label > span small { line-height: 1.4; }
.flow-type-choice input:checked + span { border-color: #779b92; background: #edf4f1; color: #356b63; box-shadow: inset 0 -2px #527d73; }
.flow-readiness { margin-bottom: 14px; padding: 14px 16px; border-radius: 2px; background: #f7f2e9; color: #594b34; }
.flow-readiness ul { margin: 7px 0 0; padding-left: 18px; }
.flow-readiness li { margin: 3px 0; }
.flow-builder-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 16px; align-items: start; }
.flow-builder-main { display: grid; gap: 16px; }
.flow-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.flow-section-heading h2,.flow-section-heading h3 { margin: 3px 0; }
.flow-ai-policy { padding: 17px; border-radius: 2px; background: #eef3f3; }
.flow-ai-policy .flow-section-heading { margin-bottom: 13px; color: #456861; }
.flow-setting-row { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px; background: #f4f6f7; }
.check-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px !important; color: #44535e; font-size: 13px; }
.check-row input { width: auto; }
.flow-sequence-panel { min-height: 390px; }
.flow-count { padding: 5px 8px; border-radius: 2px; color: #52636e; background: #edf1f3; font-size: 12px; }
.flow-timeline { margin-top: 18px; }
.flow-step-card { position: relative; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 11px; padding-bottom: 13px; }
.flow-step-card:not(:last-child)::before { position: absolute; top: 35px; bottom: -2px; left: 17px; width: 1px; background: #cad4d9; content: ''; }
.flow-step-marker { position: relative; z-index: 1; }
.flow-step-marker span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 2px; color: #fff; background: #486c64; font-size: 12px; font-weight: 700; }
.flow-step-content { padding: 14px; border: 1px solid #dde3e7; border-radius: 2px; background: #fff; }
.flow-step-card.is-disabled { opacity: .58; }
.flow-step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.flow-step-identity { display: flex; gap: 11px; align-items: center; }
.flow-step-identity > span { display: grid; width: 38px; height: 38px; place-items: center; color: #496a63; background: #edf3f1; }
.flow-step-identity strong,.flow-step-identity small { display: block; }
.flow-step-identity small { margin-top: 2px; color: #78838c; }
.flow-step-content > p { margin: 10px 0 5px; color: #67747e; font-size: 13px; }
.flow-step-content code { display: inline-block; padding: 5px 7px; background: #f1f4f5; color: #53616c; font-size: 11px; }
.flow-step-editor { position: sticky; top: 76px; min-width: 0; max-width: 100%; max-height: calc(100vh - 92px); overflow-x: hidden; overflow-y: auto; }
.flow-step-editor > form,.flow-step-editor [data-step-fields],.flow-message-picker { min-width: 0; max-width: 100%; }
.flow-step-editor h2 { margin: 4px 0 16px; }
.flow-step-editor [data-step-fields] { padding: 12px; border-radius: 2px; background: #f3f6f6; }
.flow-step-editor [data-step-fields][hidden] { display: none; }
.flow-empty { padding: 40px 20px; color: #71808a; text-align: center; }
.flow-empty > span { display: grid; width: 52px; height: 52px; margin: 0 auto 12px; place-items: center; color: #56746d; background: #edf3f1; }
.flow-empty strong { display: block; color: #35434d; }
.flow-empty p { margin: 5px 0; }

.integration-provider-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.integration-health-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.integration-health-summary article { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid #dce3e6; background: #fff; }
.integration-health-summary article > span { display: grid; width: 38px; height: 38px; place-items: center; color: #6d7d86; background: #f0f3f4; }
.integration-health-summary article.is-ok > span { color: #3d6b61; background: #e8f2ee; }
.integration-health-summary article.is-attention > span { color: #815f2f; background: #f6eddd; }
.integration-health-summary strong,.integration-health-summary small { display: block; }
.integration-health-summary strong { color: #283943; font-size: 19px; }
.integration-health-summary small { margin-top: 1px; color: #748089; font-size: 12px; }
.integration-provider-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 13px; padding: 17px; border: 1px solid #dbe2e6; border-radius: 3px; background: #fff; }
.integration-provider-card .btn { grid-column: 2; justify-self: start; }
.integration-provider-card > form { grid-column: 2; margin: 0; }
.integration-provider-card h2 { margin: 0 0 4px; font-size: 17px; }
.integration-provider-card p { min-height: 38px; margin: 0 0 6px; color: #6c7881; font-size: 13px; }
.integration-provider-card small { color: #849099; }
.oauth-complete-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: #f2f5f6; }
.oauth-complete-card { width: min(100%, 480px); padding: 30px; border: 1px solid #dbe2e6; border-radius: 3px; text-align: center; }
.oauth-complete-card .integration-provider-icon { margin: 0 auto 16px; }
.oauth-complete-card h1 { margin: 8px 0; font-size: 24px; }
.oauth-complete-card p { margin: 0 0 22px; }
.oauth-complete-card .btn { justify-content: center; }
.integration-provider-icon { display: grid; width: 46px; height: 46px; place-items: center; color: #426960; background: #eaf2ef; }
.integration-provider-icon.compact { width: 38px; height: 38px; }
.integration-list { padding: 0; overflow: hidden; }
.integration-list > .flow-section-heading { padding: 17px; border-bottom: 1px solid #e1e6e9; }
.integration-row { display: grid; grid-template-columns: 42px minmax(190px,1fr) 180px auto; align-items: center; gap: 12px; padding: 14px 17px; border-bottom: 1px solid #e5e9eb; }
.integration-row:last-child { border-bottom: 0; }
.integration-row-main strong,.integration-row-main small,.integration-tested { display: block; }
.integration-row-main small,.integration-tested { margin-top: 3px; color: #78848d; font-size: 12px; }
.integration-form-layout { display: grid; grid-template-columns: minmax(0,700px) 320px; gap: 16px; align-items: start; }
.integration-security-note { display: flex; gap: 11px; padding: 13px; color: #46645d; background: #edf4f1; }
.integration-security-note strong,.integration-security-note small { display: block; }
.integration-security-note small { margin-top: 3px; color: #697972; }
.integration-help { position: sticky; top: 76px; }
.integration-help h2 { margin: 4px 0 12px; }
.integration-help ul { padding-left: 19px; color: #61707a; }
.integration-help li { margin: 9px 0; line-height: 1.4; }
.integration-side-stack { display: grid; gap: 12px; }
.integration-side-stack .integration-help { position: static; }
.rd-connect-card h2 { margin: 4px 0 10px; }
.rd-connect-card > p { color: #68757e; line-height: 1.45; }
.rd-connect-button { width: 100%; margin: 5px 0 8px; }
.rd-connected-state { display: flex; align-items: center; gap: 10px; padding: 12px; color: #315d54; background: #eaf3ef; }
.rd-connected-state strong,.rd-connected-state small { display: block; }
.rd-connected-state small { margin-top: 2px; color: #60746d; }
.rd-callback { margin-top: 13px; padding-top: 11px; border-top: 1px solid #e0e6e9; }
.rd-callback span,.rd-callback code { display: block; }
.rd-callback span { margin-bottom: 4px; color: #77838c; font-size: 11px; text-transform: uppercase; }
.rd-callback code { overflow-wrap: anywhere; padding: 7px; background: #f1f4f5; font-size: 10px; }

.flow-tabs { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid #d8e0e4; }
.flow-tabs button { min-width: 150px; padding: 11px 15px; border: 0; border-bottom: 2px solid transparent; color: #687681; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.flow-tabs button:hover { color: #395b54; background: #f2f5f5; }
.flow-tabs button.is-active { border-bottom-color: #426e64; color: #315d54; background: #edf3f1; }
.flow-tabs button span { margin-left: 5px; padding: 2px 5px; border-radius: 2px; color: #5d6b75; background: #e3e8ea; font-size: 10px; }
.flow-run-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin-bottom: 14px; border: 1px solid #d8e0e4; background: #fff; }
.flow-run-summary article { min-height: 74px; padding: 14px 16px; border-right: 1px solid #e2e7e9; }
.flow-run-summary article:last-child { border-right: 0; }.flow-run-summary span { display: block; color: #6c7880; font-size: 11px; }.flow-run-summary strong { display: block; margin-top: 5px; color: #19342f; font-size: 22px; }
.flow-manual-run { display: grid; grid-template-columns: minmax(260px,1fr) minmax(260px,.8fr) auto; gap: 18px; align-items: end; margin-bottom: 14px; }.flow-manual-run h2 { margin: 3px 0 4px; }
.flow-runs-panel { padding: 20px; }.flow-run-list { display: grid; gap: 10px; margin-top: 14px; }.flow-run-card { padding: 14px 16px; border: 1px solid #dbe2e5; background: #fbfcfc; }
.flow-run-head { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }.flow-run-head small { display: block; margin-top: 3px; color: #718089; }.flow-run-meta { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 10px; color: #65747d; font-size: 12px; }
.flow-run-error { margin-top: 10px; padding: 10px 12px; border-left: 2px solid #b7645b; color: #7a3933; background: #f8efed; font-size: 12px; }.flow-run-card details { margin-top: 10px; }.flow-run-card summary { color: #45675f; cursor: pointer; font-size: 12px; font-weight: 600; }
.flow-run-events { margin: 9px 0 0; padding: 0; list-style: none; border-top: 1px solid #e2e7e9; }.flow-run-events li { display: grid; grid-template-columns: 100px minmax(0,1fr) auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid #e7ebed; color: #5f6e76; font-size: 11px; }.flow-run-events em { font-style: normal; color: #405e57; }
@media (max-width: 1050px) { .flow-run-summary { grid-template-columns: repeat(3,1fr); }.flow-run-summary article:nth-child(3) { border-right: 0; }.flow-manual-run { grid-template-columns: 1fr; } }
.flow-config-panel { max-width: 1060px; }
.flow-config-panel > .flow-section-heading { margin-bottom: 17px; }
.flow-trigger-rd { padding: 15px; border-radius: 2px; background: #f1f4f5; }
.flow-trigger-rd p { margin: 9px 0; color: #68757e; font-size: 13px; }
.flow-ready-ok { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 11px 13px; border-radius: 2px; color: #315d54; background: #eaf3ef; }
.flow-step-card.has-warning .flow-step-marker span { background: #8b7044; }
.flow-step-card.has-warning .flow-step-content { background: #fffdf8; }
.flow-step-message { margin: 10px 0 6px; padding: 10px 11px; background: #f0f4f4; }
.flow-step-message strong,.flow-step-message small { display: block; }
.flow-step-message small { margin-top: 3px; color: #71808a; }
.flow-step-warning,.flow-inline-warning { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; padding: 8px 9px; border-radius: 2px; color: #6b5635; background: #f7f0e4; font-size: 12px; line-height: 1.35; }
.flow-message-picker { padding: 0 !important; background: transparent !important; }
.field-label { display: block; margin-bottom: 3px; color: #34434e; font-weight: 600; }
.field-help { margin: 0 0 8px; color: #75818a; font-size: 12px; }
.flow-message-options { min-width: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; max-height: 230px; border: 1px solid #d8e0e4; }
.flow-message-option { display: flex; width: 100%; min-width: 0; max-width: 100%; align-items: center; justify-content: space-between; gap: 9px; padding: 10px; border: 0; border-bottom: 1px solid #e3e8ea; color: #34434e; background: #fff; text-align: left; cursor: pointer; }
.flow-message-option:last-of-type { border-bottom: 0; }
.flow-message-option:hover,.flow-message-option:focus-visible { background: #f0f4f3; outline: 0; }
.flow-message-option.is-selected { background: #e8f1ee; box-shadow: inset 3px 0 #4d776e; }
.flow-message-option > span:first-child { min-width: 0; }
.flow-message-option-actions { display: flex; flex: 0 0 auto; min-width: 0; align-items: center; gap: 7px; }
.flow-message-option-actions .template-preview-trigger { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid #d6dfe2; border-radius: 2px; color: #557069; background: #fff; }
.flow-message-option-actions .template-preview-trigger:hover { color: #244f46; background: #edf3f1; }
.flow-message-option strong,.flow-message-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-message-option small { margin-top: 2px; color: #7a868e; font-size: 11px; }
.flow-message-preview { min-height: 150px; max-height: 330px; }
.flow-message-preview .wa-template-bubble { margin-top: 0; }
.flow-internal-recipient { margin-top: 10px; padding: 11px; background: #f1f4f5; }
.flow-recipient-summary { margin: 10px 0 7px; padding: 9px 10px; color: #5f6e77; background: #f1f4f5; font-size: 12px; }
.integration-managed-app { display: flex; align-items: center; gap: 9px; padding: 11px; color: #315d54; background: #eaf3ef; }
.integration-managed-app strong,.integration-managed-app small { display: block; }
.integration-managed-app small { margin-top: 2px; color: #60746e; }
[data-auth-field][hidden],[data-provider-field][hidden] { display: none !important; }
.integration-simple-heading { max-width: 980px; }
.integration-connect-layout { display: grid; grid-template-columns: minmax(0,720px) 300px; gap: 16px; align-items: start; max-width: 1040px; }
.integration-connect-main { padding: 24px; }
.integration-connect-brand { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid #e1e7e9; }
.integration-provider-icon.large { width: 54px; height: 54px; }
.integration-connect-brand h2 { margin: 3px 0 4px; font-size: 22px; }
.integration-connect-brand p { margin: 0; color: #68757e; font-size: 13px; }
.integration-connect-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 24px 0; padding: 0; list-style: none; }
.integration-connect-steps li { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; padding-right: 14px; }
.integration-connect-steps li:not(:last-child)::after { position: absolute; top: 16px; right: 5px; left: calc(100% - 20px); height: 1px; background: #dce3e6; content: ''; }
.integration-connect-steps li > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #cfd9dc; color: #6b7881; background: #f6f8f8; font-size: 12px; font-weight: 700; }
.integration-connect-steps li.is-current > span { border-color: #6f938a; color: #fff; background: #426e64; }
.integration-connect-steps strong,.integration-connect-steps small { display: block; }
.integration-connect-steps strong { margin-top: 1px; color: #34434e; font-size: 13px; }
.integration-connect-steps small { margin-top: 3px; color: #78848c; font-size: 11px; line-height: 1.35; }
.integration-connect-button { display: flex; width: min(100%,430px); min-height: 46px; margin: 2px auto 8px; align-items: center; justify-content: center; font-size: 14px; }
.integration-reassurance { margin: 0 auto 23px; color: #748089; font-size: 12px; text-align: center; }
.integration-unavailable-note { display: flex; gap: 11px; margin: 22px 0 14px; padding: 14px; color: #66583d; background: #f6f1e7; }
.integration-unavailable-note strong,.integration-unavailable-note p { display: block; margin: 0; }
.integration-unavailable-note p { margin-top: 4px; color: #766b55; font-size: 13px; line-height: 1.45; }
.integration-setup-wizard { margin-top: 22px; padding: 18px; background: #f3f6f6; }
.integration-setup-wizard h3 { margin: 4px 0 5px; font-size: 18px; }
.integration-setup-wizard > p { margin: 0 0 17px; color: #69767f; font-size: 13px; line-height: 1.45; }
.integration-setup-wizard > ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.integration-setup-wizard > ol > li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: start; }
.integration-setup-wizard > ol > li > span { display: grid; width: 28px; height: 28px; place-items: center; color: #fff; background: #557a72; font-size: 11px; font-weight: 700; }
.integration-setup-wizard li strong,.integration-setup-wizard li small { display: block; }
.integration-setup-wizard li strong { color: #34434e; font-size: 13px; }
.integration-setup-wizard li small { margin: 2px 0 7px; color: #748089; font-size: 12px; line-height: 1.4; }
.integration-setup-wizard code { display: block; overflow-wrap: anywhere; padding: 9px; color: #4e5e68; background: #fff; font-size: 11px; }
.integration-https-warning { margin-top: 7px; padding: 8px 9px; color: #735d37; background: #f5ecdc; font-size: 11px; line-height: 1.4; }
.integration-app-credentials { margin-top: 18px; padding-top: 17px; border-top: 1px solid #dbe3e5; }
.integration-app-credentials > .btn { justify-self: start; }
.integration-ready-state { display: flex; align-items: flex-start; gap: 13px; margin: 22px 0 16px; padding: 17px; color: #315d54; background: #eaf3ef; }
.integration-ready-state strong { font-size: 16px; }
.integration-ready-state p { margin: 4px 0 0; color: #60746e; font-size: 13px; line-height: 1.45; }
.integration-primary-actions { margin-bottom: 20px; }
.integration-plain-security { display: flex; gap: 10px; margin-top: 20px; padding: 13px 0; border-top: 1px solid #e3e8ea; color: #4f6c65; }
.integration-plain-security strong,.integration-plain-security small { display: block; }
.integration-plain-security small { margin-top: 3px; color: #76827d; }
.integration-secondary-settings,.integration-technical-settings,.integration-inline-advanced { margin-top: 7px; border-top: 1px solid #e4e9eb; }
.integration-secondary-settings summary,.integration-technical-settings summary,.integration-inline-advanced summary { padding: 13px 0; color: #62717b; font-size: 12px; font-weight: 600; cursor: pointer; }
.integration-secondary-content { padding: 3px 0 13px; }
.integration-secondary-content > p { color: #6c7881; font-size: 12px; line-height: 1.45; }
.integration-secondary-content .text-action { margin-top: 10px; }
.integration-technical-settings { margin-top: 0; }
.integration-connect-help { padding: 20px; }
.integration-connect-help h2 { margin: 4px 0 15px; font-size: 18px; }
.integration-connect-help ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.integration-connect-help li { display: flex; align-items: flex-start; gap: 8px; color: #53636d; font-size: 13px; line-height: 1.4; }
.integration-connect-help li svg { flex: 0 0 auto; color: #4a766c; }
.integration-connect-help > p { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e4e9eb; color: #7b878f; font-size: 12px; line-height: 1.45; }
.integration-platform-setup { margin-top: 12px; padding: 0; }
.integration-platform-setup summary { padding: 13px 17px; color: #748089; font-size: 12px; cursor: pointer; }
.integration-platform-setup > div { padding: 0 17px 16px; }
.integration-platform-setup p { margin: 0 0 11px; color: #748089; font-size: 12px; }
.flow-async-notice { margin-bottom: 11px; padding: 9px 10px; border-radius: 2px; color: #315d54; background: #eaf3ef; font-size: 12px; }
.flow-form-errors { padding: 10px; border-radius: 2px; color: #8b3a36; background: #f8eeee; font-size: 12px; }
.flow-form-errors ul { margin: 5px 0 0; padding-left: 17px; }
.flow-import-form { margin: 0; }
.btn[disabled] { cursor: not-allowed; opacity: .48; }

@media (max-width: 1100px) {
  .flow-mode-grid,.flow-type-choice { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .flow-builder-layout,.integration-form-layout,.integration-connect-layout { grid-template-columns: 1fr; }
  .flow-step-editor,.integration-help { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .flow-mode-grid,.flow-type-choice,.flow-filters,.integration-provider-grid,.integration-health-summary { grid-template-columns: 1fr; }
  .flow-step-head { flex-direction: column; }
  .integration-row { grid-template-columns: 42px minmax(0,1fr); }
  .integration-row > div:nth-child(3),.integration-row > div:nth-child(4) { grid-column: 2; }
  .integration-connect-brand { grid-template-columns: 54px minmax(0,1fr); }
  .integration-connect-brand > .badge { grid-column: 2; justify-self: start; }
  .integration-connect-steps { grid-template-columns: 1fr; gap: 14px; }
  .integration-connect-steps li:not(:last-child)::after { display: none; }
}