/* Super FLAVIA V2 — bandeja canónica (Figtree, #12327e, #F6C324) */
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap");

:root {
  --sf-navy: #12327e;
  --sf-navy-2: #0e2867;
  --sf-gold: #F6C324;
  --sf-gold-2: #e8b615;
  --sf-bg: #eef2f8;
  --sf-chat: #f6f8fc;
  --sf-line: #dde4f0;
  --sf-muted: #7c88a0;
  --sf-text: #101a2e;
  --sf-chip: #f2f5fa;
  --sf-ok: #1c7a45;
  --sf-ok-bg: #e8f5ec;
  --sf-warn: #8a6a06;
  --sf-warn-bg: #fff6e0;
}

body.sf-shell {
  font-family: Figtree, Helvetica, sans-serif;
  background: #0d1b34;
  color: var(--sf-text);
  -webkit-font-smoothing: antialiased;
}

body.sf-shell #app {
  display: grid;
  grid-template-columns: 88px 392px minmax(0, 1fr) 322px;
  height: 100vh;
  padding: 0;
  gap: 0;
  background: var(--sf-bg);
}

body.sf-shell:not(.tab-conv) #app {
  grid-template-columns: 88px minmax(0, 1fr);
}

body.sf-shell:not(.tab-conv) #sidebar,
body.sf-shell:not(.tab-conv) #chat-area,
body.sf-shell:not(.tab-conv) #context-panel {
  display: none !important;
}

body.sf-shell.tab-conv #main-panel {
  display: none !important;
}

#app-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0 14px;
  background: var(--sf-navy);
  color: #a9bce6;
  z-index: 6;
}

#app-rail .rail-logo {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  object-fit: cover;
  margin-bottom: 12px;
  background: #fff;
}

#app-rail button[data-rail-tab],
#app-rail .rail-btn {
  width: 60px;
  height: 58px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #a9bce6;
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.1;
  text-align: center;
}

#app-rail button[data-rail-tab] svg {
  width: 20px;
  height: 20px;
}

#app-rail button[data-rail-tab].active {
  background: #fff;
  color: var(--sf-navy);
}

#app-rail button[data-rail-tab]:not(.active):hover {
  background: #1b46a8;
  color: #fff;
}

#app-rail .rail-spacer { flex: 1; }

#app-rail .rail-btn {
  text-decoration: none;
}

#app-rail a.rail-btn {
  color: #a9bce6;
}

#app-rail a.rail-btn:hover {
  background: #1b46a8;
  color: #fff;
}

#app-rail .rail-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin: 4px 0 10px;
}

#app-rail .rail-tool {
  width: 58px;
  min-height: 62px;
  border: 0;
  padding: 7px 4px 6px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #2a4fb8 0%, #12327e 52%, #0b2158 100%);
  color: #f7fbff;
  cursor: pointer;
  font-family: inherit;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -10px 14px rgba(6, 16, 42, .32),
    0 8px 14px rgba(6, 16, 40, .28);
  transform: translateY(0);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

#app-rail .rail-tool:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  color: #fff;
}

#app-rail .rail-tool:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 8px 12px rgba(6, 16, 42, .35),
    0 3px 6px rgba(6, 16, 40, .2);
}

#app-rail .rail-tool-glyph {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  position: relative;
}

#app-rail .rail-tool-glyph svg {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.28));
}

#app-rail .rail-tool-face {
  display: grid;
  place-items: center;
}

#app-rail .rail-tool-face--off { display: none; }
#app-rail .rail-tool.is-off .rail-tool-face--on { display: none; }
#app-rail .rail-tool.is-off .rail-tool-face--off { display: grid; }

#app-rail .rail-tool.is-off {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #3b4a72 0%, #1a2744 58%, #10182c 100%);
  color: #f6c324;
}

#rail-user {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#rail-avatar {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--sf-gold);
  color: var(--sf-navy);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
  box-shadow:
    0 0 0 2px rgba(246, 195, 36, .9),
    0 6px 12px rgba(6, 16, 40, .35);
}

#rail-avatar.has-photo {
  background: #0e2867;
}

#rail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#rail-avatar .avail-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22a35c;
  border: 2px solid var(--sf-navy);
}

#rail-avatar.unavailable .avail-dot { background: #c9cfdb; }

#rail-user-menu {
  position: absolute;
  left: 62px;
  bottom: 0;
  width: 212px;
  background: #fff;
  border: 1px solid var(--sf-line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(9, 22, 54, 0.24);
  padding: 8px;
  z-index: 40;
  text-align: left;
  color: var(--sf-text);
}

#rail-user-menu.hidden { display: none; }

#rail-user-menu .menu-id {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px 11px;
  border-bottom: 1px solid #eef1f7;
  margin-bottom: 4px;
}

.rail-menu-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sf-gold);
  color: var(--sf-navy);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}

.rail-menu-photo.has-photo {
  background: #0e2867;
}

.rail-menu-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#rail-user-menu .menu-id strong { display: block; font-size: 13px; }
#rail-user-menu .menu-id span { font-size: 11px; color: var(--sf-muted); }

#rail-user-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #26324c;
  cursor: pointer;
  font-family: inherit;
}

#rail-user-menu button:hover { background: var(--sf-chip); }
#rail-user-menu button.danger { color: #b23c2e; border-top: 1px solid #eef1f7; margin-top: 4px; }

body.sf-shell #sidebar {
  width: 392px;
  min-width: 392px;
  max-width: 392px;
  height: 100vh;
  border: 0;
  border-right: 1px solid var(--sf-line);
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

body.sf-shell #sidebar-header {
  padding: 18px 20px 12px;
  border-bottom: 1px solid #eef1f7;
}

body.sf-shell #sidebar-header h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sf-text);
}

#inbox-subtitle {
  font-size: 11.5px;
  color: var(--sf-muted);
  margin-top: 2px;
}

.inbox-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.inbox-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#wa-connected-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--sf-ok-bg);
  color: var(--sf-ok);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

#wa-connected-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22a35c;
}

body.sf-shell #btn-start-conversation {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--sf-navy);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

body.sf-shell #search-bar {
  padding: 0 20px 10px;
}

body.sf-shell #search-input {
  width: 100%;
  background: var(--sf-chip);
  border: 1px solid #e2e8f3;
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
}

body.sf-shell #filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 10px;
}

body.sf-shell #filter-store {
  flex: 1;
  border: 1px solid #e2e8f3;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12px;
  background: #fbfcfe;
  font-family: inherit;
}

body.sf-shell #filter-status,
body.sf-shell #btn-export-csv,
body.sf-shell #btn-refresh-conv,
body.sf-shell #btn-logout,
body.sf-shell #btn-logout-top,
body.sf-shell #btn-notification-settings,
body.sf-shell #workspace-card,
body.sf-shell #quick-stats,
body.sf-shell #nav-tabs,
body.sf-shell #main-topbar,
body.sf-shell #app-footer,
body.sf-shell .nexus-launcher,
body.sf-shell #tab-flow-builder,
body.sf-shell #tab-bot-lab,
body.sf-shell #btn-brand-image,
body.sf-shell #ws-indicator,
body.sf-shell #header-info-legacy,
body.sf-shell .header-info #btn-availability {
  display: none !important;
}

body.sf-shell #inbox-lanes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
  padding: 0 20px 12px;
  grid-template-columns: none;
}

body.sf-shell .lane-chip {
  min-width: auto;
  background: var(--sf-chip);
  color: #42506b;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

body.sf-shell .lane-chip.active {
  background: var(--sf-navy);
  color: #fff;
}

body.sf-shell .lane-chip[data-lane="no-store"] {
  background: var(--sf-warn-bg);
  color: var(--sf-warn);
  border: 1px solid #f4e2ad;
  font-weight: 700;
}

body.sf-shell .lane-chip[data-lane="no-store"].active {
  background: var(--sf-gold);
  color: var(--sf-navy);
  border-color: transparent;
}

body.sf-shell .lane-copy { display: none; }
body.sf-shell .lane-value { opacity: 0.65; margin-left: 4px; }

body.sf-shell #view-conv {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.sf-shell #conv-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  background: #fff;
}

body.sf-shell .conv-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #eef1f7;
  border-left: 3px solid transparent;
  cursor: pointer;
  background: #fff;
}

body.sf-shell .conv-item.active {
  background: #f4f7fd;
  border-left-color: var(--sf-navy);
}

body.sf-shell .conv-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #dfe7f6;
  color: #2c4a8c;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

body.sf-shell .conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body.sf-shell .conv-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
body.sf-shell .conv-phone { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sf-shell .conv-time { font-size: 11px; color: #8b95ab; flex: none; }
body.sf-shell .conv-preview { font-size: 12.5px; color: #5d6880; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sf-shell .conv-tags { display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap; }

.sf-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #eef2f8;
  color: #42506b;
}

.sf-tag.store-none { color: var(--sf-warn); background: var(--sf-warn-bg); }
.sf-tag.new { color: var(--sf-ok); background: var(--sf-ok-bg); }
.sf-tag.bot { color: #5a3fb8; background: #eae6fb; }
.sf-wa {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--sf-ok);
  background: var(--sf-ok-bg);
  padding: 2px 6px;
  border-radius: 5px;
}

.sf-note-flag {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #fff3d0;
  color: var(--sf-warn);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unread-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sf-gold);
  color: var(--sf-navy);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.sf-shell #main-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sf-chat);
}

body.sf-shell #main-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

body.sf-shell #chat-area {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--sf-chat);
  display: flex;
  flex-direction: column;
}

body.sf-shell #chat-header {
  flex: none;
  background: #fff !important;
  color: #101a2e !important;
  border-bottom: 1px solid var(--sf-line);
  padding: 12px 22px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "id actions" "flags actions";
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
}

body.sf-shell #chat-header .chat-id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

body.sf-shell #chat-header .contact-info { min-width: 0; flex: 1; }
body.sf-shell #chat-header .contact-name {
  font-size: 15px;
  font-weight: 600 !important;
  color: #101a2e !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sf-shell #chat-header .contact-phone {
  font-size: 12px;
  color: #6c7791 !important;
  opacity: 1 !important;
}
body.sf-shell #chat-header .contact-summary-grid,
body.sf-shell #chat-header .conv-channel-row,
body.sf-shell #btn-back-conv { display: none !important; }

.chat-status-stack {
  grid-area: flags;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 0;
}

.sf-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
}

.sf-pill.warn { background: #fff8e0; border: 1px solid #f4e2ad; color: var(--sf-warn); }
.sf-pill.ok { background: var(--sf-ok-bg); border: 1px solid #c6e6d3; color: var(--sf-ok); }
.sf-pill.danger { background: #fdf1ef; border: 1px solid #f3c7c0; color: #b23c2e; }

.sf-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

body.sf-shell #chat-header .actions {
  grid-area: actions;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: none;
}

body.sf-shell #chat-header .actions button {
  background: var(--sf-chip);
  color: #32405c;
  border: 0;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
}

body.sf-shell #chat-header .actions button#btn-close,
body.sf-shell #chat-header .actions button#btn-transfer {
  background: var(--sf-navy);
  color: #fff;
  font-weight: 700;
}

body.sf-shell #messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: var(--sf-chat);
}

body.sf-shell .msg-bubble {
  max-width: 520px;
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 4px 16px 16px 16px;
  background: #fff;
  border: 1px solid #e3e8f2;
}

body.sf-shell .msg-outgoing {
  align-self: flex-end;
  background: var(--sf-navy);
  color: #f4f7ff !important;
  border: 0;
  border-radius: 16px 4px 16px 16px;
}

body.sf-shell .msg-outgoing .msg-sender {
  color: #d7e2fb !important;
  font-weight: 600;
  opacity: 1;
}

body.sf-shell .msg-time { font-size: 10.5px; color: #98a2b7; margin-top: 6px; }
body.sf-shell .msg-outgoing .msg-time,
body.sf-shell .msg-outgoing .msg-status {
  color: #c9d6f4 !important;
  text-align: right;
  font-weight: 500;
}
body.sf-shell .msg-outgoing .msg-failed { color: #ffd4cc !important; }
body.sf-shell .msg-sender { font-size: 11px; font-weight: 600; margin-bottom: 4px; color: #5a6a8a; }

body.sf-shell .msg-outgoing .media-shell {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
}
body.sf-shell .msg-outgoing .media-loading,
body.sf-shell .msg-outgoing .media-error,
body.sf-shell .msg-outgoing .chat-media-link {
  color: #eef3ff !important;
}
body.sf-shell .msg-outgoing .btn-retry-msg {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff !important;
}
body.sf-shell .msg-outgoing .audio-speed-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.24);
  color: #fff !important;
}
body.sf-shell .msg-outgoing .audio-speed-btn.active {
  background: var(--sf-gold);
  color: var(--sf-navy) !important;
  border-color: transparent;
}

body.sf-shell .msg-note {
  max-width: 560px;
  align-self: flex-end;
  background: #fffbeb;
  border: 1px dashed #e7cd7f;
  border-radius: 12px;
  padding: 12px 15px;
  font-size: 13px;
  color: #6b5407;
}

body.sf-shell .msg-note-meta {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

body.sf-shell #internal-note-area {
  display: none;
  margin: 0 22px 10px;
  gap: 8px;
  align-items: center;
  background: #fffbeb;
  border: 1px dashed #e7cd7f;
  border-radius: 10px;
  padding: 8px 10px;
}

body.sf-shell #internal-note-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: inherit;
}

body.sf-shell #btn-search-clear { display: none; }

body.sf-shell:not(.tab-conv) #main-panel,
body.sf-shell:not(.tab-conv) #main-stage {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

body.sf-shell:not(.tab-conv) .module-view,
body.sf-shell:not(.tab-conv) #view-contacts,
body.sf-shell:not(.tab-conv) #view-agents,
body.sf-shell:not(.tab-conv) #view-dashboard {
  flex: 1;
  min-height: 0;
}

body.sf-shell #reply-area {
  flex: none;
  position: relative;
  overflow: visible;
  padding: 10px 12px 10px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  margin: 0 22px 16px;
  background: #fbfcfe;
}

body.sf-shell .composer-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

body.sf-shell #btn-attach,
body.sf-shell #btn-voice,
body.sf-shell #btn-quick-replies {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #dbe3f0;
  background: #fff;
  color: var(--sf-navy);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

body.sf-shell #reply-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
}

body.sf-shell #btn-send {
  width: auto;
  height: auto;
  background: var(--sf-gold);
  color: var(--sf-navy);
  border: 0;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
}

body.sf-shell #btn-internal-note-toggle {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #6c7791;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--sf-chip);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

body.sf-shell #quick-replies-pop {
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  max-height: min(320px, 46vh);
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16, 26, 46, 0.14);
  z-index: 40;
}

body.sf-shell .quick-replies-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b95ab;
}

body.sf-shell .window-banner {
  margin: 0 22px 10px;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
}

body.sf-shell .window-banner.open { background: var(--sf-ok-bg); color: var(--sf-ok); }
body.sf-shell .window-banner.closed { background: #fdf1ef; color: #b23c2e; }

body.sf-shell #empty-state {
  margin: auto;
  text-align: center;
  color: var(--sf-navy);
}
body.sf-shell #empty-state .empty-title { font-weight: 800; color: var(--sf-navy); }
body.sf-shell #empty-state .empty-copy { font-size: 0.85rem; max-width: 360px; text-align: center; color: #7c88a0; }
body.sf-shell .inbox-empty { padding: 48px 28px; text-align: center; color: #7c88a0; }
body.sf-shell .inbox-empty-title { font-weight: 700; color: #101a2e; margin-bottom: 8px; }

body.sf-shell #empty-state .icon { font-size: 42px; margin-bottom: 8px; }

#context-panel {
  width: 322px;
  flex: none;
  background: #fff;
  border-left: 1px solid var(--sf-line);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}

#context-panel.is-empty {
  justify-content: center;
  align-items: center;
  color: var(--sf-muted);
  font-size: 13px;
  text-align: center;
}

.ctx-hero { display: flex; flex-direction: column; align-items: center; gap: 7px; padding-bottom: 16px; border-bottom: 1px solid #eef1f7; }
.ctx-hero .conv-avatar { width: 62px; height: 62px; font-size: 20px; }
.ctx-hero strong { font-size: 16px; }
.ctx-hero span { font-size: 12px; color: var(--sf-muted); }
.ctx-block { display: flex; flex-direction: column; gap: 9px; }
.ctx-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #8b95ab; }
.ctx-row { display: flex; justify-content: space-between; font-size: 13px; gap: 8px; }
.ctx-row span:first-child { color: #6c7791; }
.ctx-row span:last-child { font-weight: 600; text-align: right; }
.ctx-card { border: 1px solid #e6ebf4; border-radius: 11px; padding: 11px 12px; }
.ctx-card.soon { border-style: dashed; background: #fafbfd; color: #98a2b7; }
.ctx-bot { margin-top: auto; background: #f4f7fc; border: 1px solid #e4eaf4; border-radius: 12px; padding: 13px; }

body.sf-shell .module-view,
body.sf-shell #view-dashboard,
body.sf-shell #view-contacts,
body.sf-shell #view-agents {
  background: var(--sf-bg);
}

#login-overlay .login-brand {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--sf-navy);
}

#login-portal-btn {
  display: block;
  text-align: center;
  background: var(--sf-navy);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
}

#login-toggle-local {
  margin-top: 12px;
  width: 100%;
  background: transparent;
  border: 0;
  color: #64748b;
  cursor: pointer;
}

#login-local.hidden { display: none; }

.sf-modal {
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
}

.sf-modal-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #eef1f7;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.sf-modal-body {
  padding: 18px 24px 8px;
}

.sf-modal-foot {
  padding: 16px 24px;
  border-top: 1px solid #eef1f7;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #fbfcfe;
}

.sf-primary {
  background: var(--sf-navy);
  color: #fff;
  border: 0;
  padding: 10px 20px;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.sf-modal .form-group {
  margin-bottom: 14px;
}
.sf-modal .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #5a6a8a;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.sf-modal .form-group input,
.sf-modal .form-group select,
.sf-modal .form-group textarea {
  width: 100%;
  border: 1px solid #dbe2ef;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  background: #fff;
}
body.sf-shell .start-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
body.sf-shell .start-modal-grid .form-group.full,
body.sf-shell .start-modal-grid #start-modal-error {
  grid-column: 1 / -1;
}
body.sf-shell #start-template-help {
  font-size: 12px;
  color: var(--sf-muted);
  margin-top: 6px;
  line-height: 1.45;
}
body.sf-shell #start-modal-error {
  color: #b23c2e;
  font-size: 12.5px;
  min-height: 18px;
  margin: 4px 0 8px;
}
body.sf-shell .audience-preview {
  background: var(--sf-warn-bg);
  border: 1px solid #f0e0a8;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--sf-text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.sf-shell #btn-preview-audience {
  margin-left: auto;
  border: 0;
  background: var(--sf-navy);
  color: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

#transfer-modal .sf-modal {
  overflow: hidden;
}

#transfer-dest-tabs { padding: 16px 24px 0; display: flex; gap: 8px; }
#transfer-dest-tabs button {
  flex: 1;
  border: 1.5px solid #e4eaf4;
  background: #fff;
  border-radius: 12px;
  padding: 12px 13px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
#transfer-dest-tabs button.active { border-color: var(--sf-navy); background: #f4f7fd; }
#transfer-dest-tabs strong { display: block; font-size: 13.5px; }
#transfer-dest-tabs span { font-size: 11px; color: var(--sf-muted); }

.channel-card {
  background: #fff;
  border: 1px solid #e2e8f3;
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 16px;
}

#settings-pane-canales .integration-grid {
  grid-template-columns: 1fr;
  max-width: 920px;
}
.channel-card.pending { border-style: dashed; }
.channel-card .channel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.channel-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 14px;
  margin-top: 16px;
}
.channel-form-grid label,
.channel-secret-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #4c5a73;
}
.channel-form-grid input,
.channel-secret-grid input,
.channel-webhook input {
  border: 1.5px solid #e4eaf4;
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1a2744;
  background: #fff;
}
.channel-secret-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 14px;
  margin-top: 12px;
}
.channel-hint {
  margin: 12px 0 0;
  color: #5d6880;
  font-size: 13px;
  line-height: 1.5;
}
.channel-webhook {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  align-items: center;
}
.channel-webhook input {
  flex: 1;
}
.channel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.channel-enabled {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1a2744;
}

body.theme-dark.sf-shell { color: #e8eefc; }
body.theme-dark.sf-shell #app { background: #0b1220; }
body.theme-dark.sf-shell #sidebar,
body.theme-dark.sf-shell #context-panel,
body.theme-dark.sf-shell #chat-header,
body.theme-dark.sf-shell #reply-area { background: #121b2e; color: #e8eefc; border-color: #24344f; }
body.theme-dark.sf-shell #chat-area,
body.theme-dark.sf-shell #messages,
body.theme-dark.sf-shell #conv-list { background: #0e1626 !important; }
body.theme-dark.sf-shell .conv-item { background: transparent; border-color: #1d2942; color: #e8eefc; }
body.theme-dark.sf-shell .conv-item.active { background: #18233a; }
body.theme-dark.sf-shell .conv-phone { color: #f2f6ff; }
body.theme-dark.sf-shell .conv-preview { color: #9aa8c4; }
body.theme-dark.sf-shell .conv-time,
body.theme-dark.sf-shell .conv-store-label { color: #8b98b3; }
body.theme-dark.sf-shell .conv-avatar { background: #24344f; color: #d7e2fb; }
body.theme-dark.sf-shell .msg-bubble { background: #18233a; border-color: #2a3b5c; color: #e8eefc; }
body.theme-dark.sf-shell #app-rail { background: #0a1531; }
body.theme-dark.sf-shell #rail-user-menu { background: #121b2e; color: #e8eefc; border-color: #24344f; }
body.theme-dark.sf-shell #empty-state,
body.theme-dark.sf-shell #empty-state div,
body.theme-dark.sf-shell #empty-state > div { color: #c5d0e8 !important; background: transparent !important; }
body.theme-dark.sf-shell #empty-state .empty-title { color: #f2f6ff !important; }
body.theme-dark.sf-shell .inbox-empty { color: #9aa8c4; }
body.theme-dark.sf-shell .inbox-empty-title { color: #f2f6ff; }
body.theme-dark.sf-shell #context-panel.is-empty,
body.theme-dark.sf-shell #context-panel-body { color: #c5d0e8; }
body.theme-dark.sf-shell #search-input,
body.theme-dark.sf-shell #filter-store,
body.theme-dark.sf-shell #reply-input,
body.theme-dark.sf-shell #internal-note-input { background: #18233a; color: #e8eefc; border-color: #2a3b5c; }
body.theme-dark.sf-shell .lane-chip { background: #18233a; color: #c5d0e8; border-color: #2a3b5c; }
body.theme-dark.sf-shell .lane-chip.active { background: #f6c324; color: #12327e; }
body.theme-dark.sf-shell #sidebar-header,
body.theme-dark.sf-shell .list-head,
body.theme-dark.sf-shell #list-header { color: #e8eefc; border-color: #24344f; }
body.theme-dark.sf-shell #wa-connected-pill { background: #163528; color: #8be0ad; }
body.theme-dark.sf-shell .sf-tag { background: #24344f; color: #d7e2fb; }
body.theme-dark.sf-shell .sf-tag.store-none { background: #3a2f12; color: #f6c324; }
body.theme-dark.sf-shell .sf-wa { background: #163528; color: #8be0ad; }
body.theme-dark.sf-shell #chat-header .chat-name,
body.theme-dark.sf-shell #header-name,
body.theme-dark.sf-shell #header-phone { color: #e8eefc !important; }
body.theme-dark.sf-shell .ctx-label { color: #8b98b3; }
body.theme-dark.sf-shell .ctx-row span:first-child { color: #9aa8c4; }
body.theme-dark.sf-shell .ctx-row span:last-child { color: #e8eefc; }
body.theme-dark.sf-shell .ctx-hero { border-color: #24344f; }
body.theme-dark.sf-shell .ctx-bot,
body.theme-dark.sf-shell .ctx-card { background: #18233a; border-color: #2a3b5c; color: #c5d0e8; }
body.theme-dark.sf-shell .sf-modal { background: #121b2e; color: #e8eefc; }
body.theme-dark.sf-shell .sf-modal-head,
body.theme-dark.sf-shell .sf-modal-foot { background: #162036; border-color: #24344f; }
body.theme-dark.sf-shell .sf-modal .form-group input,
body.theme-dark.sf-shell .sf-modal .form-group select,
body.theme-dark.sf-shell .sf-modal .form-group textarea { background: #18233a; color: #e8eefc; border-color: #2a3b5c; }
body.theme-dark.sf-shell #view-contacts,
body.theme-dark.sf-shell #view-campaigns,
body.theme-dark.sf-shell #view-tiendas,
body.theme-dark.sf-shell #view-agents,
body.theme-dark.sf-shell #view-integrations,
body.theme-dark.sf-shell #main-panel,
body.theme-dark.sf-shell #main-stage { background: #0b1220; color: #e8eefc; }
body.theme-dark.sf-shell .contact-row,
body.theme-dark.sf-shell .campaign-card { background: #121b2e; border-color: #24344f; box-shadow: none; }
body.theme-dark.sf-shell .contact-primary .name,
body.theme-dark.sf-shell .contact-col .value { color: #e8eefc; }
body.theme-dark.sf-shell .contact-primary .phone { color: #9eb6ea; }
body.theme-dark.sf-shell .settings-head { background: #121b2e !important; border-color: #24344f !important; }
body.theme-dark.sf-shell .settings-head h2 { color: #e8eefc; }
body.theme-dark.sf-shell .module-hero { background: #121b2e !important; color: #e8eefc !important; box-shadow: none !important; }
body.theme-dark.sf-shell .module-hero-copy h2 { color: #e8eefc !important; }
body.theme-dark.sf-shell .module-hero-copy p { color: #9aa8c4 !important; }
body.theme-dark.sf-shell .sf-btn-ghost { background: #18233a; color: #e8eefc; border-color: #2a3b5c; }

body.sf-shell .conv-item .badge,
body.sf-shell .conv-item .conv-owner,
body.sf-shell .conv-item .conv-store,
body.sf-shell .conv-item .conv-channel-row,
body.sf-shell .conv-item .conv-name,
body.sf-shell .conv-item .conv-footer,
body.sf-shell .conv-item .attention-chip,
body.sf-shell .origin-chip { display: none; }

body.sf-shell .lane-chip .lane-label,
body.sf-shell .lane-chip .lane-value {
  display: inline !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: inherit !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

body.sf-shell .lane-chip {
  box-shadow: none !important;
  text-transform: none;
}

body.sf-shell .sf-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  line-height: 1.2;
}
body.sf-shell .sf-btn-ghost {
  background: #fff;
  color: var(--sf-navy);
  border: 1px solid #dbe2ef;
}
body.sf-shell .sf-btn-gold {
  background: var(--sf-gold);
  color: var(--sf-navy);
  border: 0;
}
body.sf-shell .contact-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
body.sf-shell .conv-store-label {
  font-size: 10.5px;
  color: #98a2b7;
}

body.sf-shell #view-integrations.settings-view {
  flex-direction: column;
  background: var(--sf-bg);
}
body.sf-shell #view-integrations > .module-toolbar,
body.sf-shell #view-integrations .integration-summary-strip,
body.sf-shell #btn-probe-office-pro {
  display: none !important;
}

.settings-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.settings-head p { font-size: 12.5px; color: var(--sf-muted); margin-top: 4px; }
.settings-tabs { display: flex; gap: 22px; margin-top: 16px; border-bottom: 1px solid var(--sf-line); }
.settings-tabs button {
  border: 0;
  background: none;
  padding: 0 2px 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #7c88a0;
  cursor: pointer;
}
.settings-tabs button.active { color: var(--sf-navy); border-bottom: 2.5px solid var(--sf-navy); }
.settings-pane { padding-top: 8px; }

.xfer-option {
  border: 1.5px solid #e6ebf4;
  background: #fff;
  border-radius: 12px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.xfer-option.selected { border-color: var(--sf-navy); background: #f4f7fd; }
.xfer-option.dim { opacity: 0.55; }
.xfer-list { display: flex; flex-direction: column; gap: 8px; max-height: 270px; overflow-y: auto; padding: 12px 24px 0; }

@media (max-width: 1100px) {
  body.sf-shell #app { grid-template-columns: 88px 340px minmax(0, 1fr); }
  body.sf-shell #context-panel { display: none; }
  body.sf-shell #sidebar { width: 340px; min-width: 340px; max-width: 340px; }
}

@media (max-width: 900px) {
  body.sf-shell #app { grid-template-columns: 1fr; }
  body.sf-shell #app-rail { display: none; }
  body.sf-shell #sidebar { width: 100%; min-width: 0; max-width: none; }
}

.edge-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #f2f5fa;
  color: #42506b;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

#btn-expand-list,
#btn-expand-context {
  display: none;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  color: #42506b;
  cursor: pointer;
  font-size: 18px;
}

#context-panel-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  flex: 1;
}
.ctx-collapse {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

body.sf-shell.list-collapsed.tab-conv #app {
  grid-template-columns: 88px 32px minmax(0, 1fr) 322px;
}
body.sf-shell.context-collapsed.tab-conv #app {
  grid-template-columns: 88px 392px minmax(0, 1fr) 32px;
}
body.sf-shell.list-collapsed.context-collapsed.tab-conv #app {
  grid-template-columns: 88px 32px minmax(0, 1fr) 32px;
}

body.sf-shell.list-collapsed #sidebar {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  overflow: hidden;
}
body.sf-shell.list-collapsed #sidebar > *:not(#btn-expand-list) { display: none !important; }
body.sf-shell.list-collapsed #btn-expand-list { display: block !important; }

body.sf-shell.context-collapsed #context-panel {
  width: 32px;
  padding: 0;
  overflow: hidden;
}
body.sf-shell.context-collapsed #context-panel > *:not(#btn-expand-context) { display: none !important; }
body.sf-shell.context-collapsed #btn-expand-context { display: block !important; }

body.sf-shell #view-campaigns {
  background: var(--sf-bg);
  padding: 0;
}

body.sf-shell #view-campaigns .module-hero {
  background: #fff !important;
  color: var(--sf-text) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--sf-line);
  padding: 22px 34px 18px !important;
  align-items: flex-end;
}

body.sf-shell #view-campaigns .module-hero-copy .eyebrow {
  color: #8b95ab;
  letter-spacing: 0.07em;
  font-size: 10.5px;
  opacity: 1;
}

body.sf-shell #view-campaigns .module-hero-copy h2 {
  color: var(--sf-navy);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

body.sf-shell #view-campaigns .module-hero-copy p {
  color: var(--sf-muted);
  font-size: 12.5px;
  max-width: 560px;
}

body.sf-shell #view-campaigns .module-kpi {
  background: #f4f7fd;
  border: 1px solid #e6ebf4;
  border-radius: 12px;
  color: var(--sf-navy);
  backdrop-filter: none;
}

body.sf-shell #view-campaigns .module-kpi .label {
  color: #8b95ab;
  opacity: 1;
}

body.sf-shell #view-campaigns .module-toolbar {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 16px 34px 0;
  box-shadow: none;
}

body.sf-shell #view-campaigns .module-toolbar-copy strong {
  color: var(--sf-navy);
}

body.sf-shell #view-campaigns .module-section-note {
  margin: 8px 34px 0;
  color: var(--sf-muted);
  font-size: 12.5px;
  background: transparent;
  border: 0;
  padding: 0;
}

body.sf-shell #view-campaigns .module-list {
  padding: 16px 34px 20px;
  grid-template-columns: 1fr;
  max-width: 920px;
  gap: 12px;
}

body.sf-shell #view-campaigns .campaign-card {
  background: #fff;
  border: 1px solid #e2e8f3;
  border-radius: 16px;
  box-shadow: none;
  padding: 16px 18px;
}

body.sf-shell #view-campaigns .meta-card {
  background: #f7f9fc;
  border: 1px solid #eef1f7;
  border-radius: 10px;
}

body.sf-shell #view-campaigns .module-card-title {
  font-weight: 700;
  color: var(--sf-navy);
}

body.sf-shell #view-campaigns .module-btn {
  border-radius: 9px;
  transform: none;
  box-shadow: none;
}

body.sf-shell #view-campaigns .module-btn.primary {
  background: var(--sf-gold);
  color: var(--sf-navy);
}

body.sf-shell #view-campaigns .module-btn.secondary {
  background: #fff;
  color: var(--sf-navy);
  border: 1px solid #dbe2ef;
}

body.sf-shell #view-campaigns .module-empty {
  border-radius: 14px;
  border: 1px dashed #d5deec;
  background: #fff;
  color: var(--sf-muted);
}

body.sf-shell #view-campaigns .campaign-actions .action-btn {
  border-radius: 8px;
  font-weight: 600;
}

body.sf-shell #view-campaigns .progress-track {
  background: #eef2f8;
}

body.sf-shell #view-campaigns .campaign-running-note {
  color: var(--sf-warn);
  font-weight: 600;
}

body.sf-shell #campaigns-pagination {
  padding: 0 34px 24px !important;
  border: 0 !important;
  background: transparent;
  justify-content: flex-start;
}

body.sf-shell #campaigns-pagination button {
  background: #fff !important;
  color: var(--sf-navy) !important;
  border: 1px solid #dbe2ef !important;
  border-radius: 8px;
}

body.sf-shell #view-campaigns .action-btn.action-primary {
  background: var(--sf-navy);
  color: #fff;
}

body.sf-shell .phone-prefix {
  background: #fff;
  color: var(--sf-navy);
}

body.sf-shell #view-tiendas,
body.sf-shell #view-agents {
  background: var(--sf-bg);
  padding: 0;
}

body.sf-shell #stores-list.module-list {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: none;
  align-content: stretch;
}

body.sf-shell .store-row {
  grid-template-columns: minmax(180px, 1.3fr) minmax(110px, 0.7fr) minmax(160px, 0.9fr) minmax(180px, 1fr) auto;
}

body.sf-shell .sf-table-head {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 4px 18px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b95ab;
}

body.sf-shell .store-row .contact-col .eyebrow { display: none; }

body.sf-shell #rail-availability.is-off {
  color: #f6c324;
}

body.sf-shell .sf-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sf-navy);
}

body.sf-shell .sf-switch input {
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #d7deea;
  position: relative;
  cursor: pointer;
  border: 0;
}

body.sf-shell .sf-switch input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

body.sf-shell .sf-switch input:checked {
  background: #12327e;
}

body.sf-shell .sf-switch input:checked::after {
  transform: translateX(16px);
}

body.theme-dark.sf-shell .sf-switch { color: #e8eefc; }
body.theme-dark.sf-shell .sf-switch input { background: #2a3b5c; }
body.theme-dark.sf-shell .sf-switch input:checked { background: #f6c324; }
body.theme-dark.sf-shell .store-row,
body.theme-dark.sf-shell .agent-row { background: #121b2e; border-color: #24344f; }