:root {
  --bg: #eff4fb;
  --bg-soft: #f7faff;
  --panel: rgba(255, 255, 255, 0.86);
  --panel-strong: rgba(255, 255, 255, 0.95);
  --card: #ffffff;
  --text: #16314f;
  --text-strong: #10253d;
  --muted: #6d86a3;
  --border: rgba(34, 96, 170, 0.14);
  --border-strong: rgba(22, 93, 184, 0.22);
  --shadow: 0 18px 48px rgba(19, 67, 127, 0.12);
  --shadow-soft: 0 8px 24px rgba(17, 72, 145, 0.08);
  --radius: 20px;
  --gap: 16px;

  --brand-1: #07192f;
  --brand-2: #0a56ad;
  --brand-3: #1d8fff;
  --brand-4: #64baff;

  --ok: rgba(39, 179, 106, 0.12);
  --ok-border: rgba(39, 179, 106, 0.28);

  --warn: rgba(242, 184, 29, 0.14);
  --warn-border: rgba(242, 184, 29, 0.28);

  --orange: rgba(242, 138, 46, 0.14);
  --orange-border: rgba(242, 138, 46, 0.28);

  --bad: rgba(226, 76, 76, 0.12);
  --bad-border: rgba(226, 76, 76, 0.24);

  --info: rgba(29, 143, 255, 0.12);
  --info-border: rgba(29, 143, 255, 0.24);

  --header-grad:
    radial-gradient(circle at top left, rgba(100, 186, 255, 0.28), transparent 32%),
    radial-gradient(circle at top right, rgba(10, 86, 173, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.95));

  --board-max-width: 100vw;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 700px at 0% 0%, rgba(100, 186, 255, 0.20), transparent 48%),
    radial-gradient(900px 560px at 100% 0%, rgba(10, 86, 173, 0.12), transparent 45%),
    linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

textarea {
  resize: vertical;
}

.mobileMenuBtn {
  display: none;
}

.mobileDrawer {
  display: none;
}

.tagsModalCard {
  max-width: 680px;
}

.owner-hidden {
  display: none !important;
}

/* Header */

.siteHeader {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 auto;
  min-height: 60px;
  backdrop-filter: blur(18px);
  background: rgba(247, 250, 255, 0.76);
  border-bottom: 1px solid rgba(34, 96, 170, 0.10);
  box-shadow: 0 8px 26px rgba(16, 66, 126, 0.05);
}

.boardTop {
  flex: 0 0 auto;
}

.wrap {
  width: calc(100vw - 32px);
  max-width: none;
  margin: 0 auto;
  padding: 4px 0;
}

.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
}

.brandBlock {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
}

.brandRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.brandLogo {
  display: block;
  width: auto;
  max-height: 34px;
}

.controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pill {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.pill input[type="number"],
.pill select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-strong);
  font-weight: 600;
}

.pill input[type="number"] {
  width: 72px;
}

.pill select {
  min-width: 112px;
}

.trialPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 320px;
  padding: 5px 10px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.trialPill:hover {
  transform: translateY(-1px);
}

/* Buttons */

.btn,
.btn2,
.xbtn,
.iconBtn,
.menuItem,
.sideItem,
.sideSubitem,
.field input,
.field select,
.field textarea,
.mobileMenuBtn {
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

.btn {
  border: 1px solid transparent;
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(10, 86, 173, 0.14);
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
}

.btn:hover,
.btn2:hover,
.xbtn:hover,
.iconBtn:hover,
.mobileMenuBtn:hover,
.sideItem:hover,
.sideSubitem:hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
}

.btn.secondary {
  background: rgba(255, 255, 255, 0.86);
  color: var(--text-strong);
  border-color: var(--border);
  box-shadow: none;
}

.btn.danger {
  background: linear-gradient(135deg, #d94d4d, #f07272);
}

.btn:disabled,
.btn2:disabled,
.xbtn:disabled,
.iconBtn:disabled,
.menuItem:disabled,
.sideItem:disabled,
.viewTab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* Status top */

.statusBar {
  margin-top: 8px;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}

.statusBarLeft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.statusBar .sub {
  font-size: 13px;
  color: var(--muted);
}

.statusBar .iconBtn {
  flex: 0 0 auto;
}

.slaInline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: auto;
}

.slaInline b {
  color: var(--text-strong);
  font-weight: 800;
}

.slaHelpWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.slaHelp {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(29, 143, 255, 0.28);
  background: linear-gradient(180deg, #e8f4ff, #cfe8ff);
  color: #075cae;
  font-size: 11px;
  font-weight: 900;
  cursor: help;
  flex: 0 0 auto;
  box-shadow: 0 4px 10px rgba(13, 99, 201, 0.14);
}

.slaHelp:hover,
.slaHelp:focus-visible {
  border-color: rgba(13, 99, 201, 0.48);
  box-shadow: 0 0 0 3px rgba(29, 143, 255, 0.13), 0 8px 18px rgba(13, 99, 201, 0.2);
  outline: none;
}

.slaTooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, calc(100vw - 28px));
  z-index: 40;
  display: grid;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  background: rgba(255, 255, 255, 0.98);
  color: var(--text-strong);
  box-shadow: 0 18px 42px rgba(18, 65, 123, 0.18);
  white-space: normal;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.slaTooltip::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 8px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid rgba(34, 96, 170, 0.16);
  border-top: 1px solid rgba(34, 96, 170, 0.16);
  transform: rotate(45deg);
}

.slaHelpWrap:hover .slaTooltip,
.slaHelp:focus-visible + .slaTooltip,
.slaHelpWrap:focus-within .slaTooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.slaTooltip strong {
  font-size: 13px;
  letter-spacing: 0;
}

.slaTooltip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.slaTooltip span {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(236, 245, 255, 0.72);
  color: #31506e;
  font-size: 12px;
}

.slaTooltip span b {
  color: var(--text-strong);
  font-size: 12px;
}


.statusSummary {
  flex-wrap: wrap;
}

.statusLinePanel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.statusMetric {
  min-height: 32px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--text);
}

.statusMetric small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.statusMetric b {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 850;
}

.statusEditBtn {
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.82);
  color: var(--brand-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

/* Error */

.err {
  position: fixed;
  top: 94px;
  left: 0;
  right: 0;
  z-index: 99999;
  display: none;
  justify-content: center;
  pointer-events: none;
  padding: 0 16px;
}

#errBox {
  max-width: var(--board-max-width);
  width: 100%;
  background: linear-gradient(135deg, rgba(255, 242, 242, 0.95), rgba(255, 251, 251, 0.95));
  border: 1px solid rgba(226, 76, 76, 0.22);
  color: #9c2f2f;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(226, 76, 76, 0.08);
  pointer-events: auto;
}

/* Desktop filters */

.boardFilters {
  flex: 0 0 auto;
  padding: 6px 0 0;
}

.desktopFiltersBar {
  flex: 0 0 auto;
}

.filtersShell {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(34, 96, 170, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.92));
  box-shadow: 0 10px 28px rgba(17, 72, 145, 0.06);
  backdrop-filter: blur(12px);
}

.filterBox {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 170px;
  flex: 0 0 auto;
}

.filterBoxSearch {
  min-width: 280px;
  flex: 1 1 320px;
}

.filterBoxMini {
  min-width: 118px;
  max-width: 118px;
}

.filterBoxLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding-left: 2px;
}

.filterBox input,
.filterBox select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-strong);
  outline: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 3px 10px rgba(17, 72, 145, 0.03);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.filterBox input::placeholder {
  color: #8ba0b9;
}

.filterBox input:hover,
.filterBox select:hover {
  border-color: rgba(22, 93, 184, 0.22);
  background: rgba(255, 255, 255, 1);
}

.filterBox input:focus,
.filterBox select:focus {
  border-color: rgba(29, 143, 255, 0.36);
  box-shadow:
    0 0 0 4px rgba(29, 143, 255, 0.12),
    0 6px 18px rgba(17, 72, 145, 0.06);
  background: #fff;
  transform: translateY(-1px);
}

.filterBox select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #6f86a2 50%),
    linear-gradient(135deg, #6f86a2 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.filterActionBtn {
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  white-space: nowrap;
  align-self: flex-end;
}

.filtersShell {
  align-items: center;
}

.filterBox {
  gap: 0;
}

.filterBoxNoLabel input {
  height: 40px;
}

.filterBoxInline {
  position: relative;
}

.filterBoxInline .filterInlineLabel {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}

.filterBoxInline select,
.filterBoxInline input {
  height: 40px;
  padding-left: 92px;
}

.filterBoxInline.filterBoxShort select,
.filterBoxInline.filterBoxShort input {
  padding-left: 76px;
}

.filterBoxLabel {
  display: none;
}

/* Board */

.board {
  flex: 1 1 auto;
  min-height: 0;
  width: calc(100vw - 32px);
  min-width: 0;
  max-width: none;
  margin: 0 auto 12px;
  padding: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(320px, 1fr));
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
}

.col {
  min-width: 320px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.board::-webkit-scrollbar {
  height: 12px;
}

.board::-webkit-scrollbar-track {
  background: transparent;
}

.board::-webkit-scrollbar-thumb {
  background: rgba(34, 96, 170, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.boardLoadingState {
  grid-column: 1 / -1;
  min-height: calc(100vh - 210px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 16px 0;
}

.boardLoadingPanel {
  width: min(560px, calc(100vw - 48px));
  border: 1px solid rgba(145, 170, 202, 0.42);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 50px rgba(25, 60, 102, 0.10);
  border-radius: 16px;
  padding: 20px 22px;
}

.boardLoadingTopline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: #15324f;
  font-size: 15px;
  font-weight: 800;
}

.boardLoadingTopline strong {
  color: #5d728d;
  font-size: 12px;
  font-weight: 700;
}

.boardLoadingBar {
  position: relative;
  height: 7px;
  margin: 16px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe9f5;
}

.boardLoadingBar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1c74d8, #55b6ff, #1c74d8);
  animation: boardLoadingSlide 1.05s ease-in-out infinite;
}

.boardLoadingPanel p {
  margin: 0;
  color: #5d728d;
  font-size: 13px;
  line-height: 1.45;
}

@keyframes boardLoadingSlide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(270%); }
}

.col[data-col="green"] .colhead {
  background: linear-gradient(180deg, rgba(39, 179, 106, 0.12), rgba(255, 255, 255, 0.78));
}

.col[data-col="yellow"] .colhead {
  background: linear-gradient(180deg, rgba(242, 184, 29, 0.14), rgba(255, 255, 255, 0.78));
}

.col[data-col="orange"] .colhead {
  background: linear-gradient(180deg, rgba(242, 138, 46, 0.14), rgba(255, 255, 255, 0.78));
}

.col[data-col="red"] .colhead {
  background: linear-gradient(180deg, rgba(226, 76, 76, 0.12), rgba(255, 255, 255, 0.78));
}

.col[data-col="gray"] .colhead {
  background: linear-gradient(180deg, rgba(125, 143, 166, 0.12), rgba(255, 255, 255, 0.78));
}

.colhead {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(34, 96, 170, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  backdrop-filter: blur(10px);
}

.coltitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  min-width: 0;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
  flex: 0 0 auto;
}

.count {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--border);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

.list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

.list::-webkit-scrollbar {
  width: 10px;
}

.list::-webkit-scrollbar-track {
  background: transparent;
}

.list::-webkit-scrollbar-thumb {
  background: rgba(34, 96, 170, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.columnEmptyState {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px dashed rgba(34, 96, 170, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.46);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

/* Cards */

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 253, 255, 0.92));
  border: 1px solid rgba(34, 96, 170, 0.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(17, 72, 145, 0.08);
}

.cardOptimisticMove {
  opacity: 0.68;
  transform: translateY(3px) scale(0.992);
  pointer-events: none;
  cursor: wait;
  transition: opacity 120ms ease, transform 120ms ease;
}

.channelBadge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.channelBadge.whatsapp {
  color: #087a4a;
  background: rgba(38, 183, 106, 0.13);
  border: 1px solid rgba(38, 183, 106, 0.22);
}

.channelBadge.instagram {
  color: #9d174d;
  background: rgba(236, 72, 153, 0.12);
  border: 1px solid rgba(236, 72, 153, 0.22);
}

.priorityBadge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  max-width: 100%;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid rgba(109, 134, 163, 0.22);
  color: #46617e;
  background: rgba(241, 245, 249, 0.92);
}

.priorityBadge.critical {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

.priorityBadge.urgent {
  color: #9a3412;
  background: #ffedd5;
  border-color: #fed7aa;
}

.priorityBadge.high {
  color: #854d0e;
  background: #fef9c3;
  border-color: #fde68a;
}

.priorityBadge.normal {
  color: #166534;
  background: #dcfce7;
  border-color: #bbf7d0;
}

.priorityReasons {
  display: grid;
  gap: 3px;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(34, 96, 170, 0.10);
  background: rgba(241, 247, 255, 0.72);
  color: #476789;
  font-size: 11px;
  line-height: 1.35;
}

.priorityReasons span {
  overflow-wrap: anywhere;
}

.dangerConfirmCard {
  max-width: 420px;
}

.dangerConfirmText {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}

.cardtop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.name {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  color: var(--text-strong);
  margin: 0;
  word-break: break-word;
}

.meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.45;
  word-break: break-word;
}

.msg {
  margin-top: 12px;
  font-size: 12px;
  color: #35506d;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 4.6em;
  overflow: hidden;
}

.cardAudioPreview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #315f91;
}

.cardAudioPreview strong {
  font-size: inherit;
  font-weight: 800;
}

.cardAudioIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 28px;
  height: 24px;
  border: 1px solid rgba(29, 143, 255, 0.3);
  border-radius: 7px;
  background: rgba(29, 143, 255, 0.09);
}

.cardAudioIcon i {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: #1d8fff;
}

.cardAudioIcon i:nth-child(1),
.cardAudioIcon i:nth-child(4) { height: 6px; }
.cardAudioIcon i:nth-child(2) { height: 12px; }
.cardAudioIcon i:nth-child(3) { height: 9px; }

.cardTags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.cardMentions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.mentionBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(29, 143, 255, 0.28);
  border-radius: 999px;
  background: #e8f3ff;
  color: #075da8;
  font-size: 12px;
  font-weight: 800;
}

.commonGroupsLine {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(13, 99, 201, 0.16);
  color: #5f7ba0;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commonGroupsLine b,
.commonGroupsLine strong {
  color: #0d56a6;
}

.tagChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 140px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(13, 99, 201, 0.18);
  background: rgba(13, 99, 201, 0.08);
  color: #0d3b78;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.removableTagChip {
  justify-content: flex-start;
  gap: 4px;
  padding-right: 4px;
}

.tagChipLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tagChipRemove {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(14, 38, 70, 0.12);
  color: #17324d;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.removableTagChip:hover .tagChipRemove,
.removableTagChip:focus-within .tagChipRemove {
  opacity: 1;
  pointer-events: auto;
}

.tagChipRemove:hover,
.tagChipRemove:focus-visible {
  background: rgba(220, 38, 38, 0.16);
  color: #991b1b;
  outline: none;
}

.badge {
  font-size: 11px;
  padding: 0 11px;
  height: 28px;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-strong);
  white-space: nowrap;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.9);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 28px;
}

.badge.pending {
  background: rgba(242, 184, 29, 0.10);
  border-color: rgba(242, 184, 29, 0.26);
  color: #8b6100;
  min-width: 74px;
  justify-content: center;
}

.badge.success,
.badge.done {
  background: rgba(39, 179, 106, 0.10);
  border-color: rgba(39, 179, 106, 0.24);
  color: #1a7a46;
}

.footer {
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px dashed rgba(34, 96, 170, 0.12);
  padding-top: 12px;
  font-size: 11px;
  color: var(--muted);
}

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

.btn2 {
  font-size: 11px;
  padding: 8px 11px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-strong);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.btn2.green {
  border-color: rgba(39, 179, 106, 0.24);
  background: rgba(39, 179, 106, 0.12);
  color: #1d7d49;
}

.btn2.ghost {
  border-color: rgba(34, 96, 170, 0.12);
  background: transparent;
  color: var(--brand-2);
}

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

/* Desktop sidepanel */

.desktopSidepanel {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10010;
  pointer-events: none;
}

.desktopSidepanelBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 25, 47, 0.30);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.desktopSidepanelPanel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 30px rgba(19, 67, 127, 0.16);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}

.desktopSidepanel.open {
  pointer-events: auto;
}

.desktopSidepanel.open .desktopSidepanelBackdrop {
  opacity: 1;
}

.desktopSidepanel.open .desktopSidepanelPanel {
  transform: translateX(0);
}

.desktopSidepanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.desktopSidepanelBody {
  padding: 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sideGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sideGroupTitle,
.mobileSectionTitle {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sideItem,
.sideSubitem,
.menuItem {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-strong);
  padding: 11px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.menuIcon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.menuIcon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.sideItem:hover,
.sideSubitem:hover,
.menuItem:hover {
  background: rgba(10, 86, 173, 0.08);
  border-color: rgba(34, 96, 170, 0.10);
}


.sideMenuSubmenus,
.mobileMenuSubmenus {
  gap: 10px;
}

.sideSubmenu {
  border: 1px solid rgba(14, 38, 70, 0.10);
  background: rgba(248, 251, 255, 0.78);
  overflow: hidden;
}

.sideSubmenu summary {
  list-style: none;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  color: #3c5c82;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.sideSubmenu summary::-webkit-details-marker {
  display: none;
}

.sideSubmenu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.16s ease;
  opacity: 0.72;
}

.sideSubmenu[open] summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.sideSubmenu .sideItem,
.sideSubmenu .menuItem {
  border-radius: 0;
  border-width: 1px 0 0;
  border-color: rgba(14, 38, 70, 0.08);
  background: rgba(255, 255, 255, 0.62);
  padding-left: 14px;
}

.sideSubmenu .sideItem:hover,
.sideSubmenu .menuItem:hover {
  background: rgba(10, 86, 173, 0.08);
}

.sideSubmenu summary {
  list-style: none;
}

.sideSubmenu summary::-webkit-details-marker {
  display: none;
}

.sideSubmenuItems {
  padding-left: 10px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Old dropdown kept harmless */

.actionsMenuWrap {
  position: relative;
}

.actionsToggle {
  min-width: 110px;
  justify-content: center;
}

.actionsDropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(19, 67, 127, 0.16);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 50;
}

.actionsDropdown.open {
  display: flex;
}

/* Forms / modals */

.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 25, 47, 0.34);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}

.modal {
  width: min(680px, 94vw);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
  border: 1px solid rgba(34, 96, 170, 0.14);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(18, 65, 123, 0.18);
  overflow: hidden;
}

.termsModalCard,
.helpModalCard,
.teamModalCard {
  width: min(960px, 96vw);
}

.fiscalModalCard {
  width: min(860px, calc(100vw - 32px));
}

.teamModalCard {
  max-height: 88vh;
}

.teamModalBody,
.fiscalModalCard .modalBody {
  min-height: 0;
  overflow: auto;
}

.modalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(34, 96, 170, 0.08);
  background: linear-gradient(180deg, rgba(236, 245, 255, 0.72), rgba(255, 255, 255, 0.82));
  flex: 0 0 auto;
}

.modalTitle {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
}

.modalBody {
  padding: 16px;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.modalFooter {
  padding: 14px 16px;
  border-top: 1px solid rgba(34, 96, 170, 0.08);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  background: rgba(248, 251, 255, 0.82);
  flex: 0 0 auto;
}

.xbtn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text-strong);
  cursor: pointer;
}

.iconBtn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.82);
  color: var(--brand-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.field label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-strong);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.field textarea {
  min-height: 110px;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.pill select:focus,
.pill input[type="number"]:focus {
  outline: none;
  border-color: rgba(29, 143, 255, 0.35);
  box-shadow:
    0 0 0 3px rgba(29, 143, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.linkButton {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--primary-700);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.linkButton:hover,
.linkButton:focus-visible {
  color: var(--primary);
  text-decoration-thickness: 2px;
}

.linkButton:focus-visible {
  outline: 3px solid rgba(29, 143, 255, 0.18);
  outline-offset: 3px;
}

.docBox {
  max-height: 52vh;
  overflow: auto;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  background: rgba(245, 249, 255, 0.86);
  font-size: 12px;
  color: #31506e;
  line-height: 1.5;
  white-space: pre-wrap;
}

.quickGuideIntro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  background: linear-gradient(180deg, rgba(236, 245, 255, 0.78), rgba(255, 255, 255, 0.9));
  margin-bottom: 14px;
}

.quickGuideIntro strong,
.quickGuideIntro span {
  display: block;
}

.quickGuideIntro strong {
  color: var(--text-strong);
  font-size: 14px;
  margin-bottom: 4px;
}

.quickGuideIntro span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.guideHero {
  background:
    linear-gradient(135deg, rgba(232, 244, 255, 0.94), rgba(255, 255, 255, 0.92)),
    radial-gradient(circle at top right, rgba(29, 143, 255, 0.16), transparent 34%);
}

.guideCallouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.guideCallouts div {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(18, 65, 123, 0.05);
}

.guideCallouts b,
.guideCallouts span {
  display: block;
}

.guideCallouts b {
  color: var(--text-strong);
  font-size: 12px;
  margin-bottom: 5px;
}

.guideCallouts span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.quickSteps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.quickStep {
  min-height: 74px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 251, 255, 0.92));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 800;
}

.quickStep b {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 99, 201, 0.1);
  color: var(--brand-2);
  border: 1px solid rgba(13, 99, 201, 0.18);
}

.guideAccordion {
  border-top: 1px solid rgba(34, 96, 170, 0.16);
}

.guideAccordion details {
  border-bottom: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 12px;
}

.guideAccordion details[open] {
  background: rgba(255, 255, 255, 0.72);
}

.guideAccordion summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-strong);
  font-weight: 800;
  font-size: 14px;
}

.guideAccordion summary::-webkit-details-marker {
  display: none;
}

.guideAccordion summary::after {
  content: "⌄";
  color: var(--muted);
  font-size: 18px;
  transition: transform 0.18s ease;
}

.guideAccordion details[open] summary::after {
  transform: rotate(180deg);
}

.guidePanel {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  padding: 0 12px 17px;
  max-width: 86ch;
}

.qrBox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.qrImg {
  width: 280px;
  max-width: 70vw;
  border-radius: 18px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  background: #fff;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(17, 72, 145, 0.08);
}

.rowBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  font-size: 11px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-strong);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.tag.ok {
  border-color: var(--ok-border);
  background: var(--ok);
  color: #1d7d49;
}

.tag.bad {
  border-color: var(--bad-border);
  background: var(--bad);
  color: #9b3434;
}

.tag.mid {
  border-color: var(--info-border);
  background: var(--info);
  color: var(--brand-2);
}

.teamSearchField {
  margin-top: 12px;
  margin-bottom: 0;
}

.teamToolbar {
  margin-top: 10px;
  margin-bottom: 10px;
}

.teamListWrap {
  margin-top: 8px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 16px;
  background: rgba(247, 250, 255, 0.9);
  padding: 8px;
  max-height: 62vh;
  overflow-y: auto;
  min-height: 180px;
}

.teamList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.teamItem {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34, 96, 170, 0.10);
  background: rgba(255, 255, 255, 0.92);
}

.teamItem input {
  margin-top: 3px;
}

.teamItem b {
  font-size: 12px;
  color: var(--text-strong);
}

.teamMeta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

.teamEmpty {
  padding: 14px 10px;
  font-size: 12px;
  color: var(--muted);
}

.teamUserItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
}

.teamUserItem.inactive {
  opacity: 0.62;
}

.teamUserMain {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.teamUserMain b {
  color: var(--text-strong);
  font-size: 13px;
}

.teamUserActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.waDebug {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  max-height: none;
  overflow: visible;
  background: #eef6ff;
  color: #21466f;
  border: 1px solid rgba(29, 143, 255, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  display: none;
}

.wa-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 10px;
}

.wa-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(29, 143, 255, 0.14);
  border-top-color: var(--brand-2);
  border-radius: 50%;
  animation: waSpin 0.9s linear infinite;
}

.modalBrandMini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10, 86, 173, 0.08), rgba(100, 186, 255, 0.12));
  border: 1px solid rgba(34, 96, 170, 0.10);
  margin-bottom: 14px;
}

.modalBrandMini img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(34, 96, 170, 0.10);
}

.modalBrandMini div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modalBrandMini strong {
  color: var(--text-strong);
  font-size: 13px;
}

.modalBrandMini span {
  color: var(--muted);
  font-size: 12px;
}

.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: 11px 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(720px, calc(100vw - 28px));
  font-size: 14px;
  font-weight: 700;
  z-index: 99999;
  box-shadow: 0 16px 32px rgba(10, 86, 173, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.hasAction {
  pointer-events: auto;
}

.toastText {
  min-width: 0;
}

.toastAction {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
}

.toastAction:hover {
  background: rgba(255, 255, 255, 0.26);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mobileSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobilePill {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d9e3ef;
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.03);
  color: #24364d;
  font-size: 12px;
  font-weight: 700;
}

.mobilePill input,
.mobilePill select {
  width: 100%;
  height: 38px;
  border-radius: 11px;
  border: 1px solid #d7e2f0;
  background: #f9fbff;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: #183153;
  outline: none;
  appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.mobilePill input::placeholder {
  color: #97a3b6;
  font-size: 11px;
  font-weight: 600;
}

.mobilePill select {
  cursor: pointer;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7a90 50%),
    linear-gradient(135deg, #6b7a90 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

@keyframes waSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Medium screens */

@media (max-width: 1400px) {
  .trialPill {
    max-width: 280px;
    font-size: 11px;
    padding: 7px 11px;
  }

  .brandLogo {
    max-height: 44px;
  }
}

@media (max-width: 1180px) {
  .top {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .brandBlock {
    min-width: 0;
  }

  .trialPill {
    max-width: 260px;
    font-size: 11px;
    padding: 7px 11px;
  }

  .statusBar {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .statusBarLeft {
    max-width: 100%;
    width: auto;
  }

  .board {
    width: calc(100vw - 24px);
    min-width: calc((300px * 4) + (var(--gap) * 3));
    padding-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .col {
    min-height: 420px;
  }

  .list {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Mobile */

@media (max-width: 760px) {
  body {
    overflow: hidden;
  }

  .desktopFiltersBar {
    display: none;
  }

  .statusBar {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .statusBarLeft,
  .slaInline {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }

  .slaHelp {
    flex: 0 0 auto;
  }

  .statusBar .sub {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .desktopSidepanel {
    display: none;
  }

  .mobileDrawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
  }

  .mobileDrawerBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 25, 47, 0.34);
    opacity: 0;
    transition: opacity 0.18s ease;
  }

  .mobileDrawerPanel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(86vw, 360px);
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 30px rgba(19, 67, 127, 0.16);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    display: flex;
    flex-direction: column;
  }

  .mobileDrawer.open {
    pointer-events: auto;
  }

  .mobileDrawer.open .mobileDrawerBackdrop {
    opacity: 1;
  }

  .mobileDrawer.open .mobileDrawerPanel {
    transform: translateX(0);
  }

  .mobileDrawerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }

  .mobileDrawerBody {
    padding: 12px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .mobileMenuBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-strong);
    font-size: 18px;
    cursor: pointer;
  }

  .controls,
  .trialPill {
    display: none !important;
  }

  .wrap {
    width: calc(100vw - 20px);
    padding: 14px 0;
  }

  .siteHeader .top {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
  }

  .brandBlock {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: auto;
  }

  .brandRow {
    width: auto;
  }

  .brandLogo {
    width: 108px;
    max-height: none;
  }

  .board {
    flex: 1 1 auto;
    min-height: 0;
    width: 100vw;
    min-width: 0;
    margin: 0;
    padding: 8px 12px 14px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100vw - 24px);
    grid-template-columns: unset;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .board::-webkit-scrollbar {
    height: 0;
  }

  .col {
    min-height: 0;
    height: 100%;
    scroll-snap-align: start;
    border-radius: 20px;
  }

  .colhead {
    padding: 14px 14px 12px;
  }

  .list {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
  }

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

  .name {
    font-size: 13px;
  }

  .meta,
  .msg,
  .footer,
  .btn2,
  .badge {
    font-size: 11px;
  }

  .footer {
    flex-direction: column;
    align-items: stretch;
  }

  .actions {
    justify-content: flex-start;
  }

  .pill {
    width: 100%;
    justify-content: space-between;
    border-radius: 16px;
  }

  .pill select,
  .pill input[type="number"] {
    min-width: 0;
    width: auto;
    max-width: 48%;
    text-align: right;
  }

  .modalOverlay {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 8px;
  }

  .modal,
  .termsModalCard,
  .helpModalCard,
  .teamModalCard,
  .fiscalModalCard {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    margin: 0 auto;
    border-radius: 18px;
  }

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

  .quickGuideIntro {
    align-items: stretch;
    flex-direction: column;
  }

  .modalBody,
  .fiscalModalCard .modalBody {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modalFooter {
    justify-content: stretch;
  }

  .modalFooter .btn {
    width: 100%;
    justify-content: center;
  }

  .err {
    top: 78px;
    padding: 0 10px;
  }
}

/* =========================
   COMPACTAÇÃO DE ALTURAS
   ========================= */

/* Header mais fino */
.siteHeader {
  min-height: 72px;
}

.top {
  gap: 12px;
}

.brandLogo {
  max-height: 42px;
}

.trialPill {
  padding: 6px 10px;
  font-size: 11px;
}

.btn.secondary#btnDesktopSidepanel {
  padding: 7px 12px;
  font-size: 12px;
  min-height: 38px;
}

/* Barra de status/SLA mais fina */
.boardTop {
  padding: 0;
}

.statusBar .sub {
  font-size: 12px;
}

.statusBarLeft {
  gap: 6px;
}

.slaInline {
  gap: 4px;
  font-size: 12px;
}

.slaHelp {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.iconBtn {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

/* Aviso de erro mais compacto */
.err {
  top: 74px;
}

#errBox {
  padding: 10px 12px;
  border-radius: 14px;
}

/* Barra de filtros mais fina */
.boardFilters {
  padding: 4px 0 0;
}

.filtersShell {
  padding: 10px 12px;
  border-radius: 18px;
  gap: 10px;
}

.filterBox {
  gap: 5px;
  min-width: 150px;
}

.filterBoxSearch {
  min-width: 240px;
  flex: 1 1 280px;
}

.filterBoxMini {
  min-width: 108px;
  max-width: 108px;
}

.filterBoxLabel {
  font-size: 11px;
  padding-left: 1px;
}

.filterBox input,
.filterBox select {
  height: 40px;
  border-radius: 12px;
  padding: 0 12px;
  font-size: 12px;
}

.filterActionBtn {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 12px;
}

/* Board sobe um pouco */
.board {
  padding: 8px 0 0;
  margin-bottom: 12px;
}

/* Colunas e cards um pouco mais enxutos */
.col {
  border-radius: 20px;
}

.colhead {
  padding: 12px 14px 10px;
}

.coltitle {
  gap: 8px;
  font-size: 13px;
}

.dot {
  width: 10px;
  height: 10px;
}

.count {
  min-width: 30px;
  height: 30px;
  font-size: 11px;
  padding: 0 8px;
}

.list {
  padding: 10px;
  gap: 10px;
}

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

.name {
  font-size: 13px;
}

.meta {
  font-size: 10px;
  margin-top: 4px;
}

.msg {
  margin-top: 10px;
  font-size: 11px;
}

.cardTags {
  margin: 8px 0 2px;
}

.tagChip {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.badge {
  font-size: 10px;
  padding: 5px 9px;
}

.footer {
  margin-top: 10px;
  padding-top: 10px;
  font-size: 10px;
  gap: 10px;
}

.actions {
  gap: 6px;
}

.btn2 {
  font-size: 10px;
  padding: 7px 10px;
}

/* Sidepanel um pouco mais enxuto */
.desktopSidepanelHeader {
  padding: 12px 14px;
}

.desktopSidepanelBody {
  padding: 14px;
  gap: 14px;
}

.sideItem,
.sideSubitem,
.menuItem {
  padding: 10px 11px;
  font-size: 12px;
  border-radius: 10px;
}

/* Mobile também mais compacto */
@media (max-width: 760px) {
  .wrap {
    padding: 10px 0;
  }

  .brandLogo {
    width: 98px;
  }

  .statusBar {
    gap: 4px;
  }

  .statusBar .sub,
  .slaInline {
    font-size: 11px;
  }

  .board {
    padding: 6px 10px 10px;
    gap: 10px;
  }

  .colhead {
    padding: 12px 12px 10px;
  }

  .list {
    padding: 10px;
    gap: 10px;
  }

  .card {
    padding: 10px;
    border-radius: 14px;
  }

  .mobileDrawerHeader {
    padding: 12px 14px;
  }

  .mobileDrawerBody {
    padding: 14px;
    gap: 14px;
  }

  .mobilePill {
    padding: 12px 14px;
    gap: 6px;
    border-radius: 14px;
    font-size: 12px;
  }

  .mobilePill input,
  .mobilePill select {
    height: 40px;
    font-size: 12px;
  }

  .err {
    top: 68px;
  }
}

.filtersShellCompact {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.filterInlineGroup {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 0 auto;
}

.filterInlineText {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

.filterInlineGroup input,
.filterInlineGroup select {
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-strong);
  padding: 0 12px;
  outline: none;
  min-width: 0;
}

.filterInlineGroup select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #6f86a2 50%),
    linear-gradient(135deg, #6f86a2 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.filterInlineSearch {
  flex: 1 1 320px;
  min-width: 260px;
  max-width: 620px;
}

.filterInlineSearch input {
  width: 100%;
}

.searchFilterControl {
  position: relative;
  min-width: 0;
}

.filterInlineSearch .searchFilterControl {
  flex: 1 1 auto;
}

.searchFilterControl input {
  padding-right: 102px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.searchFilterControl.is-active input {
  border-color: #2482dc;
  background: #f7fbff;
  box-shadow: 0 0 0 3px rgba(36, 130, 220, 0.12);
}

.searchFilterStatus {
  display: none;
  position: absolute;
  right: 37px;
  top: 50%;
  transform: translateY(-50%);
  color: #0d68bd;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}

.searchFilterClear {
  display: none;
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #e6f2ff;
  color: #075eae;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.searchFilterControl.is-active .searchFilterStatus,
.searchFilterControl.is-active .searchFilterClear {
  display: flex;
}

.searchFilterClear:hover,
.searchFilterClear:focus-visible {
  background: #cfe7ff;
  outline: 2px solid rgba(13, 104, 189, 0.2);
}

.filterInlineGroup:not(.filterInlineSearch):not(.filterInlineMini) select {
  width: 170px;
}

.filterInlineMini input {
  width: 72px;
}

@media (max-width: 1440px) {
  .filtersShellCompact {
    gap: 10px;
  }

  .filterInlineSearch {
    flex-basis: 300px;
    max-width: 520px;
  }

  .filterInlineGroup:not(.filterInlineSearch):not(.filterInlineMini) select {
    width: 150px;
  }
}

@media (max-width: 1280px) {
  .filtersShellCompact {
    flex-wrap: wrap;
  }

  .filterInlineSearch {
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }

  .filterInlineSearch input {
    width: 100%;
  }
}

.meta,
.footer,
.btn2,
.badge,
.smallmuted {
  font-size: 11px;
}

.msg {
  font-size: 13px;
}

.footerStacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.actionsSingleRow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.actionsSingleRow .btn2 {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  min-height: 32px;
}

.cardInfoLine {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

.cardInfoLine b {
  color: #5f7ba0;
  font-weight: 700;
}

.filterInlineGroup input,
.filterInlineGroup select,
.filterBox input,
.filterBox select {
  font-size: 14px;
}

.filterInlineSearch input::placeholder,
.filterBox input::placeholder {
  font-size: 14px;
}

.mobileFilterRow {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d9e3ef;
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.03);
}

.mobileFilterLabel {
  font-size: 12px;
  font-weight: 700;
  color: #5f7694;
  white-space: nowrap;
}

.mobileFilterRow input,
.mobileFilterRow select {
  width: 100%;
  height: 38px;
  border-radius: 11px;
  border: 1px solid #d7e2f0;
  background: #f9fbff;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: #183153;
  outline: none;
  appearance: none;
}

.mobileFilterRow .searchFilterControl,
.mobileFilterRow .searchFilterControl input {
  width: 100%;
}

.mobileFilterRow .searchFilterControl input {
  padding-right: 92px;
}

.mobileFilterRow input::placeholder {
  color: #97a3b6;
  font-size: 11px;
  font-weight: 600;
}

.mobileFilterRow select {
  cursor: pointer;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7a90 50%),
    linear-gradient(135deg, #6b7a90 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.mobileFilterRowMini {
  grid-template-columns: 72px 90px;
}

#refreshSecMobile {
  text-align: left;
}

/* Chat drawer */
.chatDrawerBackdrop {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(11, 25, 47, 0.18);
  z-index: 9000;
}

.chatDrawerBackdrop.open {
  display: block;
}

.chatDrawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9001;
  width: min(520px, 100vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.99));
  border-left: 1px solid rgba(34, 96, 170, 0.16);
  box-shadow: -18px 0 48px rgba(18, 65, 123, 0.18);
  transform: translateX(104%);
  transition: transform 0.2s ease;
}

.chatDrawer.open {
  transform: translateX(0);
}

.chatDrawerHeader {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(34, 96, 170, 0.10);
  background: rgba(236, 245, 255, 0.72);
}

.chatDrawerTitleWrap {
  min-width: 0;
}

.chatDrawerTitle {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 850;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatDrawerMeta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.chatDrawerPhone {
  color: #34516f;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

.chatDrawerCommonGroups {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: #54779f;
}

.chatDrawerCommonGroups b {
  margin-right: 2px;
}

.chatDrawerCommonGroupLink,
.chatDrawerCommonGroupText,
.chatDrawerCommonGroupToggle {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.chatDrawerCommonGroupLink[hidden],
.chatDrawerCommonGroupText[hidden] {
  display: none;
}

.chatDrawerCommonGroupLink {
  border: 1px solid rgba(13, 99, 201, 0.24);
  background: rgba(13, 99, 201, 0.08);
  color: #075da8;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatDrawerCommonGroupLink:hover,
.chatDrawerCommonGroupLink:focus-visible {
  border-color: rgba(13, 99, 201, 0.48);
  background: rgba(13, 99, 201, 0.14);
  outline: none;
}

.chatDrawerCommonGroupText {
  background: rgba(84, 119, 159, 0.1);
  color: #54779f;
}

.chatDrawerCommonGroupToggle {
  border: 1px dashed rgba(13, 99, 201, 0.34);
  background: #fff;
  color: #075da8;
  cursor: pointer;
}

.chatDrawerCommonGroupToggle:hover,
.chatDrawerCommonGroupToggle:focus-visible {
  border-color: rgba(13, 99, 201, 0.55);
  background: rgba(13, 99, 201, 0.08);
  outline: none;
}

.chatDrawerMessages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.72), rgba(247, 250, 255, 0.92));
}

.chatDrawerEmpty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 28px 12px;
}

.chatOlderMessages {
  display: flex;
  justify-content: center;
  padding: 4px 0 10px;
  min-height: 12px;
  color: #54779f;
  font-size: 12px;
}

.chatDrawerMessages.loadingOlder .chatOlderMessages::after {
  content: "Carregando mensagens anteriores...";
}

.chatOlderMessages .btn2 {
  min-height: 34px;
  padding: 7px 14px;
  font-size: 13px;
}

.chatInviteCard {
  display: grid;
  gap: 10px;
  min-width: min(290px, 100%);
  overflow: hidden;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 10px;
  background: #fff;
}

.chatInviteMain {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px 12px 2px;
}

.chatInviteAvatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: #eef3f8;
  position: relative;
}

.chatInviteAvatar::before,
.chatInviteAvatar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #708092;
}

.chatInviteAvatar::before {
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chatInviteAvatar::after {
  bottom: 9px;
  width: 22px;
  height: 10px;
  border-radius: 12px 12px 7px 7px;
}

.chatInviteText {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chatInviteText strong {
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.25;
}

.chatInviteText span,
.chatInviteStatus {
  color: var(--muted);
  font-size: 12px;
}

.chatInviteStatus,
.chatInviteBody {
  padding: 0 12px;
}

.chatInviteBody {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.chatInviteAction,
.chatInviteExpired,
.chatInviteAccepted {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(34, 96, 170, 0.12);
  background: #fff;
  color: #087a52;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
}

.chatInviteAction {
  cursor: pointer;
}

.chatInviteAction:hover {
  background: #f5fbf8;
}

.chatInviteAction:disabled {
  cursor: wait;
  color: var(--muted);
  background: #f7faff;
}

.chatInviteExpired {
  color: #b45309;
}

.chatMessage {
  display: flex;
  margin: 8px 0;
}

.chatDateDivider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 18px 0 14px;
  pointer-events: none;
}

.chatDateDivider::before,
.chatDateDivider::after {
  content: "";
  flex: 1 1 auto;
  max-width: 120px;
  height: 1px;
  background: rgba(104, 134, 170, 0.22);
}

.chatDateDivider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid rgba(104, 134, 170, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  box-shadow: 0 5px 16px rgba(17, 72, 145, 0.08);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: capitalize;
  white-space: nowrap;
}

.chatMessage.mine {
  justify-content: flex-end;
}

.chatMessage.theirs {
  justify-content: flex-start;
}

.chatBubble {
  position: relative;
  width: fit-content;
  max-width: min(86%, 380px);
  padding: 7px 10px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 72, 145, 0.07);
}

.chatBubble.hasReactions {
  margin-bottom: 12px;
}

.chatBubbleReactions {
  position: absolute;
  right: 8px;
  bottom: -14px;
  display: flex;
  gap: 4px;
  z-index: 2;
}

.chatMessage.theirs .chatBubbleReactions {
  right: auto;
  left: 8px;
}

.chatReactionChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 25px;
  padding: 2px 7px;
  border: 1px solid rgba(34, 96, 170, 0.18);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(17, 72, 145, 0.12);
  font-size: 15px;
  line-height: 1;
}

.chatReactionChip strong {
  color: var(--muted);
  font-size: 10px;
}

.chatMessage.mine .chatBubble {
  background: rgba(29, 143, 255, 0.12);
  border-color: rgba(29, 143, 255, 0.20);
}

.chatMessage.pending .chatBubble {
  opacity: 0.76;
  border-style: dashed;
}

.chatMessage.pending .chatBubbleTime {
  color: var(--primary);
  font-weight: 800;
}

.chatMessage.pending.failed .chatBubble {
  border-color: rgba(226, 76, 76, 0.45);
  background: rgba(226, 76, 76, 0.08);
}

.chatMessage.pending.failed .chatBubbleTime {
  color: #b4232f;
}

.chatDeliveryStatus {
  font-weight: 800;
}

.chatDeliveryStatus.pending {
  color: var(--primary);
}

.chatDeliveryStatus.failed {
  color: #b4232f;
}


.chatMessage.highlight .chatBubble {
  box-shadow: 0 0 0 3px rgba(29, 143, 255, 0.22), 0 8px 20px rgba(17, 72, 145, 0.07);
}

.chatQuotedPreview {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 2px 0 7px;
  padding: 7px 9px 7px 10px;
  border: none;
  border-left: 3px solid var(--brand-3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}

.chatMessage.mine .chatQuotedPreview {
  background: rgba(255, 255, 255, 0.58);
}

.chatQuotedPreview:hover {
  background: rgba(29, 143, 255, 0.10);
}

.chatQuotedPreview strong {
  max-width: 100%;
  color: var(--brand-2);
  font-size: 11px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatQuotedPreview span {
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.28;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.chatBubbleName {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.chatContactPhoto {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  overflow: hidden;
  border-radius: 50%;
  background: #e8f1fc;
  color: #35628c;
  font-size: 11px;
  font-weight: 700;
}
.chatContactPhoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.chatContactPhoto.hasPhoto img { opacity: 1; }
.chatContactPhoto.hasPhoto > span { visibility: hidden; }
.chatContactPhoto.chatHeaderPhoto { width: 36px; height: 36px; flex-basis: 36px; font-size: 13px; }
.chatContactPhoto.boardContactPhoto { width: 38px; height: 38px; flex-basis: 38px; font-size: 13px; }

.chatParticipantLink {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.chatParticipantLink:hover { text-decoration: underline; }
.chatParticipantLink:focus-visible { outline: 2px solid #1565c0; outline-offset: 3px; border-radius: 3px; }
.chatParticipantLink:disabled { cursor: progress; opacity: .6; }

.chatBubbleNameRow {
  min-height: 20px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.chatMarkTeamBtn {
  min-width: 42px;
  height: 24px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid rgba(8, 102, 255, 0.2);
  border-radius: 7px;
  background: #e9f2ff;
  color: #0866ff;
  cursor: pointer;
}

.chatMarkTeamBtn:hover,
.chatMarkTeamBtn:focus-visible {
  background: #dbeaff;
  border-color: rgba(8, 102, 255, 0.4);
  outline: none;
}

.chatTeamPersonIcon {
  position: relative;
  width: 13px;
  height: 15px;
  flex: 0 0 13px;
}

.chatTeamPersonIcon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chatTeamPersonIcon::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 12px;
  height: 7px;
  border-radius: 7px 7px 3px 3px;
  background: currentColor;
}

.chatTeamPlus {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.chatMarkTeamBtn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.chatTeamBadge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #e9f8ef;
  color: #147a43;
  font-size: 9px;
  font-weight: 800;
}

.teamParticipantConfirmCard {
  width: min(460px, calc(100vw - 32px));
}

.teamParticipantConfirmBody {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.teamParticipantConfirmIcon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  background: #e9f2ff;
  color: #0866ff;
}

.teamParticipantConfirmIcon .chatTeamPersonIcon {
  transform: scale(1.25);
}

.teamParticipantConfirmIcon .chatTeamPlus {
  font-size: 20px;
}

.teamParticipantConfirmText strong {
  display: block;
  color: var(--text-strong);
  font-size: 15px;
  line-height: 1.35;
}

.teamParticipantConfirmText p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.chatBubbleBody {
  font-size: 14px;
  line-height: 1.38;
  color: var(--text-strong);
  white-space: normal;
  overflow-wrap: anywhere;
}

.chatMessageLink {
  color: var(--brand-2);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.chatMessageLink:hover {
  color: var(--primary);
}

.chatBubbleMedia {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.chatBubbleMediaFallback {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(270px, 100%);
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(29, 143, 255, 0.20);
  border-radius: 8px;
  background: rgba(29, 143, 255, 0.06);
  color: var(--text-strong);
}

.chatBubbleMediaFallback span {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 28px;
  border-radius: 9px;
  background: rgba(29, 143, 255, 0.14);
  color: var(--brand-2);
  font-size: 10px;
  font-weight: 900;
}

.chatBubbleMediaFallback strong { font-size: 13px; }
.chatBubbleMediaFallback div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chatBubbleMediaFallback small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }

.chatContactCard {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  padding: 10px 12px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
}

.chatContactAvatar {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(29, 143, 255, 0.12);
  color: var(--brand-2);
  font-weight: 900;
}

.chatContactInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chatContactInfo strong,
.chatContactInfo span,
.chatContactInfo small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatContactInfo strong {
  color: var(--text-strong);
  font-size: 13px;
}

.chatContactInfo span {
  color: var(--text);
  font-size: 12px;
}

.chatContactInfo small {
  color: var(--muted);
  font-size: 11px;
}

.chatContactStartBtn {
  margin-left: auto;
  border: 1px solid rgba(29, 143, 255, 0.24);
  border-radius: 999px;
  background: rgba(29, 143, 255, 0.1);
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 850;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.chatContactStartBtn:hover {
  background: rgba(29, 143, 255, 0.16);
}

.chatContactStartBtn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.chatMediaPlaceholder {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(270px, 100%);
  min-height: 62px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(29, 143, 255, 0.28);
  border-radius: 8px;
  background: rgba(29, 143, 255, 0.07);
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}

.chatMediaPlaceholderGroup {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.chatMediaPlaceholderGroup .chatMediaPlaceholder {
  margin-top: 0;
}

.chatMediaTranscribeBtn {
  justify-self: start;
  border: 1px solid rgba(29, 143, 255, 0.24);
  border-radius: 999px;
  background: rgba(29, 143, 255, 0.09);
  color: var(--brand-2);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  padding: 7px 12px;
}

.chatMediaTranscribeBtn:hover:not(:disabled) {
  background: rgba(29, 143, 255, 0.16);
}

.chatMediaTranscribeBtn:disabled {
  cursor: wait;
  opacity: 0.66;
}

.chatMediaPlaceholder:hover {
  background: rgba(29, 143, 255, 0.12);
  border-color: rgba(29, 143, 255, 0.42);
}

.chatMediaPlaceholder.loading {
  cursor: wait;
  opacity: 0.9;
}

.chatMediaPlaceholder.loading:hover {
  background: rgba(29, 143, 255, 0.07);
  border-color: rgba(29, 143, 255, 0.28);
}

.chatMediaPlaceholderIcon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
}

.chatMediaSpinner {
  display: block;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(29, 143, 255, 0.18);
  border-top-color: var(--brand);
  animation: chatMediaSpin 0.8s linear infinite;
}

@keyframes chatMediaSpin {
  to { transform: rotate(360deg); }
}

.chatMediaPlaceholder span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chatMediaPlaceholder strong { font-size: 13px; }
.chatMediaPlaceholder small { color: var(--muted); font-size: 11px; }

.chatInlineImageWrap {
  width: min(270px, 100%);
  margin-top: 8px;
}

.chatInlineImageButton {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 148px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(29, 143, 255, 0.20);
  border-radius: 10px;
  background: rgba(29, 143, 255, 0.06);
  cursor: zoom-in;
}

.chatInlineImageButton:hover {
  border-color: rgba(29, 143, 255, 0.42);
}

.chatInlineImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.chatInlineImageButton.loaded .chatInlineImage {
  opacity: 1;
}

.chatInlineImageButton.loaded[data-preview-kind="video"]::after {
  content: "\25B6";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(15, 23, 42, 0.62);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
  font-size: 16px;
  padding-left: 2px;
  pointer-events: none;
}

.chatInlineImageButton.loaded[data-preview-kind="gif"]::after {
  content: "GIF";
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, 0.66);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
}

.chatInlineImageSkeleton {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 850;
  background:
    linear-gradient(135deg, rgba(29, 143, 255, 0.10), rgba(255, 255, 255, 0.72)),
    rgba(245, 249, 255, 0.92);
}

.chatInlineImageButton.loading .chatInlineImageSkeleton::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid rgba(29, 143, 255, 0.18);
  border-top-color: var(--brand);
  animation: chatMediaSpin 0.8s linear infinite;
}

.chatInlineImageButton.loading .chatInlineImageSkeleton {
  font-size: 0;
}

.chatInlineImageButton.loaded .chatInlineImageSkeleton,
.chatInlineImageButton.loaded .chatInlineImageStatus {
  opacity: 0;
  pointer-events: none;
}

.chatInlineImageStatus {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--brand-2);
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 6px 18px rgba(13, 45, 92, 0.10);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.chatInlineImageButton.failed {
  border-color: rgba(185, 28, 28, 0.20);
  background: rgba(254, 242, 242, 0.82);
}

.chatInlineImageButton.failed .chatInlineImageSkeleton,
.chatInlineImageButton.failed .chatInlineImageStatus {
  color: #991b1b;
}

.chatBubble.deleted {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(100, 116, 139, 0.18);
}

.chatMessage.mine .chatBubble.deleted {
  background: rgba(29, 143, 255, 0.08);
}

.chatDeletedBadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid rgba(244, 63, 94, 0.24);
  border-radius: 999px;
  background: rgba(255, 241, 242, 0.92);
  color: #be123c;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.chatDeletedBadge::before {
  content: "⊘";
  font-size: 12px;
  line-height: 1;
}

.chatDeletedMessage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-style: italic;
}

.chatDeletedMessage::before {
  content: "⊘";
  font-style: normal;
  font-size: 16px;
  line-height: 1;
}

.chatBubbleTime {
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}

.chatComposer {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid rgba(34, 96, 170, 0.10);
  background: rgba(248, 251, 255, 0.96);
  transition: background .16s ease, box-shadow .16s ease;
}

.chatComposer.dragOver {
  background: #eef6ff;
  box-shadow: inset 0 0 0 2px rgba(29, 143, 255, 0.34);
}

.chatComposer textarea {
  width: 100%;
  min-height: 144px;
  max-height: 320px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-strong);
  background: #fff;
  outline: none;
  resize: none;
  box-sizing: border-box;
}

@media (max-width: 640px), (max-height: 650px) {
  .chatComposer textarea { min-height: 104px; max-height: 220px; }
}

.chatComposer textarea:focus {
  border-color: rgba(29, 143, 255, 0.44);
  box-shadow: 0 0 0 4px rgba(29, 143, 255, 0.12);
}

.chatComposerFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.chatQuickRepliesWrap { position: relative; margin-right: auto; }
.chatQuickRepliesPanel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: min(340px, calc(100vw - 48px));
  max-height: 300px;
  overflow: auto;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(16, 42, 74, .18);
}
.chatQuickRepliesPanel > button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}
.chatQuickRepliesPanel > button:hover { background: #eef6ff; }
.chatQuickRepliesPanel span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.quickRepliesModalCard {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(94vh, 940px);
}
.quickRepliesBody { display: grid; gap: 18px; }
.quickRepliesHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d9e8fb;
  border-radius: 16px;
  background: linear-gradient(135deg, #f3f9ff 0%, #ffffff 68%);
}
.quickRepliesHero > div { display: grid; gap: 4px; }
.quickRepliesHero strong { color: var(--text-strong); font-size: 18px; }
.quickRepliesHero span { color: var(--muted); font-size: 13px; }
.quickRepliesTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.quickRepliesTab {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.quickRepliesTab:hover { border-color: #9dcaff; box-shadow: 0 10px 26px rgba(13, 99, 201, .08); transform: translateY(-1px); }
.quickRepliesTab.isActive { border-color: #7eb9ff; background: #eef6ff; box-shadow: inset 0 0 0 1px rgba(24, 119, 210, .08); }
.quickRepliesTab strong { font-size: 14px; }
.quickRepliesTab small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.quickReplyTabPanel { display: grid; gap: 16px; }
.quickReplyTabPanel[hidden] { display: none !important; }
.quickReplyInfoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.quickReplyInfoCard {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.quickReplyInfoCardActive { border-color: #a8d8bf; background: #f3fff8; }
.quickReplyInfoCard strong { color: var(--text-strong); }
.quickReplyInfoCard p { margin: 0; color: var(--text); line-height: 1.45; }
.quickReplyInfoCard pre {
  margin: 0;
  padding: 12px;
  border: 1px solid #d9e8fb;
  border-radius: 10px;
  background: #f8fbff;
  color: var(--text-strong);
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.45;
}
.quickReplyInfoBadge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #d8f5e5;
  color: #0f7a3f;
  font-size: 11px;
  font-weight: 900;
}
.quickReplyCalendarPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #cfe3f8;
  border-radius: 10px;
  background: #f3f9ff;
}
.quickReplyCalendarPanel > div:first-child {
  display: grid;
  gap: 3px;
}
.quickReplyCalendarPanel span {
  color: var(--muted);
  font-size: 12px;
}
.quickReplyCalendarActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.quickReplyEditor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbff;
}
.quickReplyEditor textarea { width: 100%; resize: vertical; }
.quickReplyAutomaticToggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #b9d8f8;
  border-radius: 8px;
  background: #eef6ff;
  cursor: pointer;
}
.quickReplyAutomaticToggle input { margin-top: 3px; }
.quickReplyAutomaticToggle span { display: grid; gap: 3px; }
.quickReplyAutomaticToggle small { color: var(--muted); }
.quickReplyAutomationFields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quickReplyAutomationFields:not([hidden]) { display: grid; }
.quickReplyCalendarToggle {
  grid-column: 1 / -1;
}
.quickReplyAttachmentBox {
  display: grid;
  gap: 8px;
}
.quickReplyAttachmentBox small {
  color: var(--muted);
  font-size: 12px;
}
.quickReplyAttachmentPreview {
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 8px;
  background: #fff;
}
.quickReplyAttachmentPreview:not([hidden]) {
  display: flex;
}
.quickReplyAttachmentIcon {
  min-width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e8f1ff;
  color: #0b63ce;
  font-size: 11px;
  font-weight: 900;
}
.quickReplyAttachmentInfo {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.quickReplyAttachmentInfo strong,
.quickReplyAttachmentInfo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quickReplyAttachmentInfo strong { color: var(--text-strong); font-size: 12px; }
.quickReplyAttachmentInfo span { color: var(--muted); font-size: 11px; }
.quickReplyRepeatWarning {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid #f2c66d;
  border-radius: 8px;
  background: #fff8e8;
  color: #704a00;
  font-size: 12px;
  line-height: 1.4;
}
.quickReplyEditorActions,
.quickReplyCardActions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.quickRepliesListHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quickRepliesListHeader span { color: var(--muted); font-size: 12px; }
.quickRepliesList {
  display: grid;
  gap: 10px;
  min-height: 120px;
  max-height: min(42vh, 430px);
  overflow: auto;
  align-content: start;
}
.quickReplyCard { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.quickReplyCard.isAutomatic { border-color: #8dc5f5; box-shadow: inset 3px 0 #1877d2; }
.quickReplyCardHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.quickReplyCardHeader > div { display: grid; gap: 3px; }
.quickReplyCardHeader small { color: var(--muted); }
.quickReplyCard p { margin: 0; color: var(--text); line-height: 1.45; }
.quickReplyAttachmentChip {
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 8px;
  background: #eef6ff;
  color: #0d4f8b;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.quickReplyStatus { padding: 4px 8px; border-radius: 999px; background: #e5f3ff; color: #0969bd; font-size: 11px; font-weight: 800; }
.quickReplyCardActions .danger { color: #b42318; }

.serviceOrderAutomationGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 14px;
}
.serviceOrderAutomationCard {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.serviceOrderAutomationHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.serviceOrderAutomationHeader > div,
.serviceOrderAutomationPreviewCard { min-width: 0; }
.serviceOrderAutomationHeader span:not(.quickReplyInfoBadge),
.serviceOrderAutomationPreviewCard p {
  color: var(--muted);
  font-size: 12px;
}
.serviceOrderAutomationForm {
  display: grid;
  gap: 12px;
}
.serviceOrderEventEnabled { margin: 0; }
.serviceOrderMessageModeOptions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.serviceOrderMessageModeOption {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fbff;
  cursor: pointer;
}
.serviceOrderMessageModeOption:has(input:checked) {
  border-color: #8fc8ff;
  background: #eef6ff;
  box-shadow: inset 0 0 0 1px rgba(29, 143, 255, 0.16);
}
.serviceOrderMessageModeOption input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 2px 0 0;
}
.serviceOrderMessageModeOption span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.serviceOrderMessageModeOption b {
  color: var(--text-strong);
  font-size: 12px;
}
.serviceOrderMessageModeOption small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.serviceOrderManualMessageField textarea {
  min-height: 128px;
  width: 100%;
}
.serviceOrderManualMessageField.isDisabled,
.serviceOrderEventFields.isDisabled {
  opacity: 0.58;
  pointer-events: none;
}
.serviceOrderManualMessageField small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.serviceOrderEventFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.serviceOrderEventField {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fbff;
  cursor: pointer;
}
.serviceOrderEventField:hover {
  border-color: #9dccff;
  background: #f3f9ff;
}
.serviceOrderEventField input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 2px 0 0;
}
.serviceOrderEventField span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.serviceOrderEventField b {
  color: var(--text-strong);
  font-size: 12px;
}
.serviceOrderEventField small {
  color: var(--muted);
  line-height: 1.3;
}
.serviceOrderAutomationActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.serviceOrderEventRules {
  display: grid;
  gap: 8px;
}
.serviceOrderEventRule {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fbff;
}
.serviceOrderEventRule.isEnabled {
  border-color: #a8d8bf;
  background: #f3fff8;
}
.serviceOrderEventRule strong {
  color: var(--text-strong);
  font-size: 12px;
}
.serviceOrderEventRule span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.quickReplyInfoBadge.isOff {
  background: #eef3f8;
  color: var(--muted);
}

.boardTop {
  display: none;
}

.headerSla {
  margin-left: auto;
  max-width: min(680px, 48vw);
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inboxToolbar {
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.inboxToolbar > .filterInlineGroup:not(.filterInlineSearch) {
  display: none;
}

.inboxToolbar .filterInlineSearch {
  flex: 0 1 330px;
  min-width: 250px;
  max-width: 360px;
}

.viewTabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.viewTabs::-webkit-scrollbar {
  display: none;
}

.viewTab {
  flex: 0 0 auto;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.viewTab:hover {
  background: rgba(13, 99, 201, 0.08);
}

.viewTab:disabled:hover {
  background: transparent;
}

.viewTab.active {
  color: #0969bd;
  background: #e8f2ff;
}

.viewTab span {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 5px;
  background: #dbeeff;
  color: #0969bd;
  border: 1px solid #b8dcff;
  font-size: 11px;
  line-height: 1;
}

.viewTab .viewTabText {
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  font-size: inherit;
}

.whatsappQuickTab {
  padding-right: 8px;
}

.whatsappQuickTab select {
  max-width: 190px;
  min-width: 132px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  padding: 0 24px 0 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  outline: none;
}

.whatsappQuickTab.active select {
  background: rgba(255, 255, 255, 0.38);
  color: #0969bd;
}

.whatsappQuickTab select:hover,
.whatsappQuickTab select:focus {
  background: rgba(13, 99, 201, 0.09);
}

.colSlaEdit {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #5f7694;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.colSlaEdit:hover {
  color: #0b63ce;
  border-color: rgba(13, 99, 201, 0.28);
  background: #fff;
}

#mobileFilterDrawer {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

#mobileFilterDrawer .mobileDrawerBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 25, 47, 0.34);
  opacity: 0;
  transition: opacity 0.2s ease;
}

#mobileFilterDrawer .mobileDrawerPanel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: var(--panel-strong);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 30px rgba(19, 67, 127, 0.16);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}

#mobileFilterDrawer.open {
  pointer-events: auto;
}

#mobileFilterDrawer.open .mobileDrawerBackdrop {
  opacity: 1;
}

#mobileFilterDrawer.open .mobileDrawerPanel {
  transform: translateX(0);
}

/* Compact header and filter polish */
.inboxToolbar {
  padding: 10px 14px;
  min-height: 64px;
}

.inboxToolbar .filterInlineSearch {
  flex-basis: 340px;
  min-width: 260px;
  max-width: 420px;
}

.viewTabs {
  gap: 2px;
}

.viewTab {
  height: 34px;
  gap: 6px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 14px;
  letter-spacing: 0;
}

.viewTab span {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  font-size: 10px;
}

.viewTab .viewTabText {
  min-width: 0;
  height: auto;
  padding: 0;
  font-size: inherit;
}

.filterActionBtn {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
}

.filterActionBtn.hasActiveFilters,
.mobileFilterBtn.hasActiveFilters {
  border-color: rgba(13, 99, 201, 0.28);
  background: #e8f2ff;
  color: #0969bd;
}

.filterActiveCount {
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  border-radius: 999px;
  padding: 0 5px;
  background: #0d73d9;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.filterClearBtn {
  height: 32px;
  padding: 0 11px;
  border-radius: 10px;
  font-size: 12px;
}

.filterClearBtn:disabled {
  opacity: 0.46;
  cursor: default;
}

.filterQuickClearBtn,
.mobileFilterClearBtn {
  border-color: rgba(13, 99, 201, 0.22);
  background: #fff;
  color: #0b5fb3;
}

.filterQuickClearBtn[hidden],
.mobileFilterClearBtn[hidden] {
  display: none !important;
}

.mobileFilterClearBtn {
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

#mobileFilterDrawer .mobileDrawerPanel {
  width: min(380px, 92vw);
}

#mobileFilterDrawer .mobileDrawerHeader {
  padding: 12px 14px;
  gap: 8px;
}

#mobileFilterDrawer .mobileDrawerHeader strong {
  font-size: 15px;
  margin-right: auto;
}

#mobileFilterDrawer .mobileDrawerBody {
  padding: 10px 12px 14px;
  gap: 10px;
}

#mobileFilterDrawer .mobileSection {
  gap: 8px;
}

#mobileFilterDrawer .mobileSectionTitle {
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

#mobileFilterDrawer .mobileFilterRow {
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 46px;
  padding: 7px 8px;
  border-radius: 12px;
}

#mobileFilterDrawer .mobileFilterLabel {
  font-size: 12px;
}

#mobileFilterDrawer .mobileFilterRow input,
#mobileFilterDrawer .mobileFilterRow select {
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
}

#mobileFilterDrawer .mobileFilterRow .searchFilterControl input {
  padding-right: 82px;
}

#mobileFilterDrawer .mobileFilterRowMini {
  grid-template-columns: 82px 100px;
}

@media (max-width: 620px) {
  .quickRepliesTabs { grid-template-columns: 1fr; }
  .quickReplyInfoGrid { grid-template-columns: 1fr; }
  .quickReplyAutomationFields:not([hidden]) { grid-template-columns: 1fr; }
  .serviceOrderAutomationGrid { grid-template-columns: 1fr; }
  .serviceOrderMessageModeOptions { grid-template-columns: 1fr; }
  .serviceOrderEventFields { grid-template-columns: 1fr; }
  .chatComposerFooter { flex-wrap: wrap; }
  .chatQuickRepliesWrap { width: 100%; }
}

.supportFab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .22);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 900;
  font-size: 20px;
  padding: 0;
  overflow: visible;
}

.supportFab img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.supportUnreadBadge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #dc2626;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(185, 28, 28, .28);
}

.supportUnreadBadge[hidden] {
  display: none;
}

.supportFab.hasUnread {
  box-shadow: 0 14px 32px rgba(15, 23, 42, .22), 0 0 0 4px rgba(220, 38, 38, .12);
}

.supportFab:hover {
  transform: translateY(-1px);
}

.supportFab::before {
  content: "Fale conosco";
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  padding: 10px 14px;
  border: 1px solid #dbe7f2;
  border-radius: 8px;
  background: #fff;
  color: #17324a;
  box-shadow: 0 6px 20px #17324a1f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(8px, -50%);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

@media (hover: hover) and (pointer: fine) {
  .supportFab:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
  }
}

.supportFab:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .supportFab::before { transition: none; }
}

.supportPanel {
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: 81;
  width: min(360px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 96px));
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .22);
  overflow: hidden;
  display: none;
}

.supportPanel.open {
  display: block;
}

.supportPanelHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
}

.supportPanelHeader strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

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

.supportPanelBody {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.supportPrompt label {
  display: block;
  color: var(--ink);
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 6px;
}

.supportPrompt textarea {
  width: 100%;
  resize: vertical;
  min-height: 96px;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .45);
  padding: 10px;
  color: var(--ink);
  font: inherit;
  outline: none;
}

.supportPrompt textarea:focus {
  border-color: #0b63ce;
  box-shadow: 0 0 0 3px rgba(11, 99, 206, .12);
}

.supportActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.supportActions .btn {
  min-width: 112px;
}

.supportAnswer {
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, .22);
  padding: 10px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  max-height: 190px;
  overflow: auto;
}

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

.supportAnswer ol {
  padding-left: 20px;
  margin: 0 0 8px;
}

.supportAnswer li + li {
  margin-top: 4px;
}

.supportAnswer small {
  display: block;
  color: var(--muted);
}

@media (max-width: 620px) {
  .supportFab {
    right: 12px;
    bottom: 12px;
  }

  .supportPanel {
    right: 12px;
    bottom: 66px;
  }
}

.card {
  cursor: pointer;
}

.supportPanel.open {
  display: flex;
  flex-direction: column;
}

.supportPanelBody {
  min-height: 360px;
  max-height: calc(min(560px, calc(100vh - 96px)) - 66px);
  display: flex;
  flex-direction: column;
}

.supportThread {
  flex: 1;
  min-height: 160px;
  overflow: auto;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.supportMessage {
  align-self: flex-end;
  width: min(100%, 310px);
  background: #dceeff;
  border: 1px solid #a9d2ff;
  border-radius: 8px;
  padding: 10px 11px 8px;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

.supportMessage.incoming {
  align-self: flex-start;
  background: #fff;
  border-color: rgba(148, 163, 184, .34);
}

.supportMessage.failed {
  background: #fff1f2;
  border-color: #fecdd3;
}

.supportMessageAuthor {
  color: #5d7798;
  font-weight: 800;
  font-size: 11px;
  margin-bottom: 6px;
}

.supportMessageBody {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.35;
}

.supportMessageMeta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  color: #5d7798;
  font-size: 11px;
}

.supportMessage.failed .supportMessageMeta {
  color: #be123c;
}

.supportRetryBtn {
  border: 1px solid #fecdd3;
  border-radius: 999px;
  background: #fff;
  color: #be123c;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.supportRetryBtn:hover,
.supportRetryBtn:focus-visible {
  background: #ffe4e6;
  outline: 2px solid rgba(190, 18, 60, .18);
}

.supportPrompt label {
  display: none;
}

.supportPrompt textarea {
  min-height: 76px;
  resize: none;
}

.supportAnswer {
  display: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  max-height: none;
}

.supportAnswer.visible {
  display: block;
}

.supportAttachmentPreview {
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 8px;
  background: #f8fafc;
}

.supportAttachmentPreview img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, .35);
}

.supportAttachmentIcon {
  min-width: 42px;
  height: 42px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #e8f1ff;
  color: #0b63ce;
  font-size: 11px;
  font-weight: 900;
}

.supportAttachmentInfo {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.supportAttachmentInfo strong,
.supportAttachmentInfo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supportAttachmentInfo strong {
  color: var(--ink);
  font-size: 12px;
}

.supportAttachmentInfo span {
  color: var(--muted);
  font-size: 11px;
}

.supportAttachmentBubble {
  margin-top: 8px;
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid rgba(148, 163, 184, .36);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.supportAttachmentBubble.image {
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.supportAttachmentBubble.image img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.supportAttachmentBubble.image span {
  padding: 7px 9px;
}

.supportAttachmentBubble strong {
  font-size: 12px;
}

.supportAttachmentBubble span {
  color: #5d7798;
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .chatDrawer {
    width: 100vw;
  }

  .chatBubble {
    max-width: 92%;
  }
}


.chatImageButton {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}

.chatImageButton img {
  display: block;
  max-width: min(260px, 100%);
  max-height: 220px;
  object-fit: contain;
  border-radius: 10px;
}

.chatAttachmentPreview {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid rgba(29, 143, 255, 0.20);
  border-radius: 14px;
  background: rgba(29, 143, 255, 0.08);
}

.chatAttachmentItem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chatAttachmentPreview img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(34, 96, 170, 0.14);
}

.chatAttachmentAudio {
  width: min(260px, 100%);
  height: 38px;
}

.chatVoiceBtn.recording {
  min-width: 72px;
  border-color: rgba(220, 38, 38, 0.28);
  background: #fee2e2;
  color: #b91c1c;
}

.chatAttachmentIcon {
  min-width: 54px;
  height: 54px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #e8f1ff;
  color: #0b63ce;
  border: 1px solid rgba(34, 96, 170, 0.14);
  font-size: 11px;
  font-weight: 900;
}

.chatAttachmentInfo {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.chatAttachmentInfo strong {
  color: var(--text-strong);
  font-size: 13px;
}

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

.chatAttachmentCaption {
  width: 100%;
  min-height: 38px;
  max-height: 92px;
  resize: vertical;
  border: 1px solid rgba(34, 96, 170, 0.18);
  border-radius: 10px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
}

.chatAttachmentCaption:focus {
  outline: 2px solid rgba(29, 143, 255, 0.22);
  border-color: rgba(29, 143, 255, 0.42);
}

.chatAttachmentRemove {
  flex: 0 0 auto;
}


.chatComposerInputWrap {
  position: relative;
}

.chatMentionSuggest {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 8px);
  z-index: 2;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(18, 65, 123, 0.16);
}

.chatMentionSuggest button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  text-align: left;
}

.chatMentionSuggest button:hover {
  background: rgba(29, 143, 255, 0.10);
}

.chatMentionSuggest span {
  font-size: 11px;
  color: var(--muted);
}

.chatMentionSuggestStatus {
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
}

.chatReplyPreview {
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 9px 9px 9px 11px;
  border-left: 3px solid var(--brand-3);
  border-radius: 12px;
  background: rgba(29, 143, 255, 0.08);
}

.chatReplyPreviewText {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}

.chatReplyPreviewText strong {
  color: var(--text-strong);
}

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

.chatBubbleActions {
  position: relative;
  z-index: 3;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.chatBubbleActions button {
  border: none;
  background: transparent;
  color: var(--brand-2);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 0;
}

.chatBubbleActions button:hover {
  text-decoration: underline;
}

.chatMessageMenuWrap {
  position: relative;
  z-index: 4;
}

.chatMessageMenuWrap.menuOpen {
  z-index: 120;
}

.chatMessageMenuBtn {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 18px !important;
  line-height: 1;
}

.chatMessageMenuBtn:hover {
  background: rgba(29, 143, 255, 0.10) !important;
  text-decoration: none !important;
}

.chatMessageMenu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 1200;
  min-width: 150px;
  padding: 6px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 34px rgba(18, 65, 123, 0.15);
}

.chatMessageMenu button {
  width: 100%;
  display: block;
  padding: 8px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text) !important;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.chatMessageMenu button:hover {
  background: rgba(29, 143, 255, 0.10) !important;
  text-decoration: none !important;
}

.chatMessageMenu button.ackAdd {
  color: #075aa8 !important;
}

.chatMessageMenu button.ackRemove {
  color: #516b91 !important;
}

.chatMessageMenu button.danger {
  color: #b4232f !important;
}

.chatMessageMenu button.danger:hover {
  background: rgba(226, 76, 76, 0.10) !important;
}

.chatMentionText {
  color: var(--brand-2);
  font-weight: 850;
}


.chatAudioWrap {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  display: grid;
  grid-template-columns: 34px minmax(150px, 1fr) 28px;
  align-items: center;
  gap: 9px;
  min-width: min(310px, 100%);
}

.chatAudioWrap audio {
  display: none;
}

.chatAudioPlay,
.chatAudioMenuBtn {
  border: none;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  line-height: 1;
}

.chatAudioPlay {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 18px;
}

.chatAudioPlay:hover,
.chatAudioMenuBtn:hover {
  background: rgba(29, 143, 255, 0.10);
}

.chatAudioMain {
  min-width: 0;
}

.chatAudioProgress {
  position: relative;
  height: 18px;
  cursor: pointer;
}

.chatAudioProgress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(109, 134, 163, 0.28);
}

.chatAudioProgressFill {
  position: absolute;
  left: 0;
  top: 8px;
  height: 3px;
  width: 0;
  border-radius: 999px;
  background: var(--brand-3);
}

.chatAudioProgressKnob {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--brand-3);
  transform: translateX(-50%);
}

.chatAudioTimes {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 1px;
  font-size: 11px;
  color: var(--muted);
}

.chatAudioMenuWrap {
  position: relative;
  z-index: 2;
}

.chatAudioWrap.menuOpen,
.chatAudioMenuWrap.menuOpen {
  z-index: 80;
}

.chatAudioMenuBtn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 20px;
}

.chatAudioMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1000;
  min-width: 130px;
  padding: 6px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 34px rgba(18, 65, 123, 0.15);
}

.chatAudioMenu a,
.chatAudioMenu button {
  width: 100%;
  display: block;
  padding: 8px 9px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-strong);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.chatAudioMenu a:hover,
.chatAudioMenu button:hover {
  background: rgba(29, 143, 255, 0.10);
}

.chatAudioTranscript {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(34, 96, 170, 0.13);
  border-radius: 10px;
  background: rgba(246, 250, 255, 0.82);
}

.chatAudioTranscriptHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.chatAudioTranscriptHead strong {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 850;
}

.chatAudioTranscriptHead button {
  border: 1px solid rgba(29, 143, 255, 0.22);
  border-radius: 999px;
  background: rgba(29, 143, 255, 0.08);
  color: var(--brand-2);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 9px;
  white-space: nowrap;
}

.chatAudioTranscriptHead button:hover:not(:disabled) {
  background: rgba(29, 143, 255, 0.14);
}

.chatAudioTranscriptHead button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.chatAudioTranscriptText {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.chatAudioTranscriptStatus,
.chatAudioTranscriptError {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.chatAudioTranscriptError {
  color: #b42318;
}

.chatAudioWrap.floatingActive {
  color: var(--brand-2);
}

.floatingAudioPlayer {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 9300;
  width: min(620px, calc(100vw - 28px));
  transform: translateX(-50%);
  grid-template-columns: 42px minmax(0, 1fr) 70px 34px 34px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 96, 170, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 24px 60px rgba(13, 45, 92, 0.24);
}

.floatingAudioPlayer audio {
  display: none;
}

.floatingAudioPlay,
.floatingAudioClose,
.floatingAudioDownload {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 999px;
  background: rgba(29, 143, 255, 0.10);
  color: var(--brand-2);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.floatingAudioPlay {
  width: 42px;
  height: 42px;
  border: none;
  background: linear-gradient(135deg, #1d8fff, #0b66d8);
  color: #fff;
}

.floatingAudioInfo {
  min-width: 0;
}

.floatingAudioInfo strong,
.floatingAudioInfo span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floatingAudioInfo strong {
  color: var(--text-strong);
  font-size: 13px;
}

.floatingAudioInfo span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.floatingAudioProgress {
  position: relative;
  height: 18px;
  margin-top: 4px;
  cursor: pointer;
}

.floatingAudioProgress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(109, 134, 163, 0.26);
}

.floatingAudioProgressFill {
  position: absolute;
  left: 0;
  top: 8px;
  height: 3px;
  width: 0;
  border-radius: 999px;
  background: var(--brand-3);
}

.floatingAudioProgressKnob {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--brand-3);
  transform: translateX(-50%);
}

.floatingAudioTimes {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}

.floatingAudioSpeed {
  width: 70px;
  height: 36px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--text-strong);
  font-weight: 800;
  text-align: center;
}

@media (max-width: 560px) {
  .floatingAudioPlayer {
    left: 10px;
    right: 10px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    width: auto;
    transform: none;
    grid-template-columns: 42px minmax(0, 1fr) 64px 38px 38px;
    grid-template-areas:
      "play info speed download close";
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
  }

  .floatingAudioPlay {
    grid-area: play;
    width: 42px;
    height: 42px;
    font-size: 17px;
  }

  .floatingAudioInfo {
    grid-area: info;
  }

  .floatingAudioInfo strong {
    font-size: 12px;
  }

  .floatingAudioInfo span {
    display: none;
  }

  .floatingAudioProgress {
    height: 22px;
    margin-top: 6px;
  }

  .floatingAudioProgress::before,
  .floatingAudioProgressFill {
    top: 10px;
    height: 4px;
  }

  .floatingAudioProgressKnob {
    top: 5px;
    width: 14px;
    height: 14px;
  }

  .floatingAudioTimes {
    margin-top: 0;
    font-size: 10px;
  }

  .floatingAudioSpeed {
    grid-area: speed;
    width: 64px;
    height: 38px;
    font-size: 12px;
    padding: 0 8px;
  }

  .floatingAudioDownload {
    grid-area: download;
  }

  .floatingAudioClose {
    grid-area: close;
  }

  .floatingAudioDownload,
  .floatingAudioClose {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }
}

@media (max-width: 390px) {
  .floatingAudioPlayer {
    grid-template-columns: 40px minmax(0, 1fr) 58px 36px 36px;
    gap: 6px;
    padding: 9px;
  }

  .floatingAudioPlay {
    width: 40px;
    height: 40px;
  }

  .floatingAudioSpeed {
    width: 58px;
    height: 36px;
    font-size: 11px;
  }

  .floatingAudioDownload,
  .floatingAudioClose {
    width: 36px;
    height: 36px;
  }
}


.chatComposerInputWrap textarea {
  padding-right: 48px;
}

.chatEmojiBtn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.chatEmojiBtn:hover {
  background: rgba(29, 143, 255, 0.10);
}

.chatEmojiPanel {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 8px);
  z-index: 3;
  grid-template-columns: repeat(5, 34px);
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(18, 65, 123, 0.16);
}

.chatEmojiPanel button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.chatEmojiPanel button:hover {
  background: rgba(29, 143, 255, 0.10);
}

.chatDrawerActions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(34, 96, 170, 0.10);
  background: rgba(255, 255, 255, 0.86);
}

.chatDrawerActions .btn {
  min-height: 34px;
  padding: 8px 12px;
}

.chatTimelineEvent {
  width: min(92%, 420px);
  margin: 10px auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px dashed rgba(34, 96, 170, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-strong);
  box-shadow: 0 6px 16px rgba(17, 72, 145, 0.06);
}

.chatTimelineEvent strong,
.chatTimelineEvent span,
.chatTimelineEvent p {
  display: block;
}

.chatTimelineEvent span {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.chatTimelineEvent p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.groupEvent {
  justify-content: center;
  flex-direction: column;
  width: min(88%, 440px);
  gap: 3px;
  padding: 8px 12px;
  border-style: solid;
  border-color: rgba(111, 126, 145, 0.16);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: none;
  text-align: center;
}

.groupEventText {
  margin: 0 !important;
  color: #4e6683 !important;
  font-size: 12px !important;
  font-weight: 700;
}

.groupEventTime {
  margin: 0 !important;
  color: #7890ad !important;
  font-size: 10px !important;
}

.serviceOrderEvent {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: min(94%, 520px);
  padding: 14px;
  border-style: solid;
  background: rgba(255, 255, 255, 0.94);
}

.serviceOrderEventMain {
  min-width: 0;
}

.serviceOrderEventTitle,
.serviceOrderListTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.serviceOrderEventTitle > div {
  min-width: 0;
}

.serviceOrderEventTitle strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.25;
}

.serviceOrderEventEyebrow {
  margin: 0 0 3px !important;
  color: #5f7fa5 !important;
  font-size: 10px !important;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.serviceOrderEventMeta {
  margin-top: 5px !important;
}

.serviceOrderEventSummary {
  margin-top: 9px !important;
  padding-top: 9px;
  border-top: 1px solid rgba(34, 96, 170, 0.12);
  color: var(--text-strong) !important;
  font-size: 13px !important;
  line-height: 1.4;
}

.serviceOrderEventActions,
.serviceOrderListActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.serviceOrderEventActions {
  padding-top: 11px;
  border-top: 1px solid rgba(34, 96, 170, 0.12);
}

.serviceOrderListActions {
  align-items: flex-end;
  justify-content: flex-end;
}

.serviceOrderStatusControl {
  display: grid;
  gap: 5px;
}

.serviceOrderStatusControl > span {
  margin: 0 !important;
  color: var(--muted);
  font-size: 10px !important;
  font-weight: 800;
  text-transform: uppercase;
}

.serviceOrderStatusActions {
  display: inline-flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  border: 1px solid rgba(34, 96, 170, 0.2);
  border-radius: 7px;
  background: #fff;
}

.serviceOrderStatusActions .serviceOrderStatusBtn {
  min-height: 30px;
  padding: 5px 9px;
  border: 0;
  border-right: 1px solid rgba(34, 96, 170, 0.15);
  border-radius: 0;
  background: transparent;
  font-size: 11px;
}

.serviceOrderStatusActions .serviceOrderStatusBtn:last-child {
  border-right: 0;
}

.serviceOrderStatusActions .serviceOrderStatusBtn.active {
  background: rgba(29, 143, 255, 0.12);
  color: var(--brand-2);
}

.serviceOrderPrintBtn {
  align-self: flex-end;
}

@media (max-width: 520px) {
  .serviceOrderEventActions {
    align-items: stretch;
  }

  .serviceOrderStatusControl {
    width: 100%;
  }

  .serviceOrderStatusActions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .serviceOrderPrintBtn {
    margin-left: auto;
  }
}

.serviceOrderStatus {
  display: inline-flex !important;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(34, 96, 170, 0.18);
  font-size: 11px !important;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.serviceOrderStatus.open {
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(245, 158, 11, 0.12);
}

.serviceOrderStatus.resolved {
  color: #047857;
  border-color: rgba(16, 185, 129, 0.34);
  background: rgba(16, 185, 129, 0.12);
}

.serviceOrderStatus.canceled {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.10);
}

.serviceOrderStatusBtn {
  min-height: 30px;
  padding: 6px 9px;
  font-size: 12px;
}

.serviceOrderStatusBtn.active,
.serviceOrderStatusBtn:disabled {
  cursor: default;
  opacity: 1;
  background: rgba(29, 143, 255, 0.10);
  border-color: rgba(29, 143, 255, 0.24);
  color: var(--brand-2);
}

.productEditorGrid {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
  margin-bottom: 12px;
}

.productEditorGrid input,
.productEditorGrid textarea,
.serviceOrderModalCard textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text-strong);
  background: #fff;
}

.productEditorGrid textarea,
.productEditorGrid input[type="url"] {
  grid-column: 1 / -1;
}

.productsListWrap {
  max-height: 330px;
}

.productItem {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.productItem img,
.productThumbEmpty {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(29, 143, 255, 0.10);
}

.productThumbEmpty,
.serviceOrderProductIcon {
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--blue);
}

.productInfo {
  min-width: 0;
}

.productInfo strong,
.productInfo span,
.productInfo b {
  display: block;
}

.productInfo span {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.productInfo b {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-strong);
}

.productActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.serviceOrderModalCard {
  max-width: 760px;
}

.serviceOrderProductsHeader {
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fieldLabel {
  display: block;
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.serviceOrderProducts {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}

.serviceOrderProduct {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) 70px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.serviceOrderProduct img,
.serviceOrderProductIcon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(29, 143, 255, 0.10);
}

.serviceOrderProductText {
  min-width: 0;
}

.serviceOrderProductText strong,
.serviceOrderProductText small,
.serviceOrderProductText b {
  display: block;
}

.serviceOrderProductText small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceOrderProduct input[type="number"] {
  width: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

@media (max-width: 720px) {
  .productEditorGrid,
  .productItem,
  .serviceOrderProduct,
  .serviceOrderFilters {
    grid-template-columns: 1fr;
  }

  .productActions {
    justify-content: flex-start;
  }
}


.blockedContactsModalCard {
  width: min(760px, 96vw);
  max-height: 88vh;
}

.settingsModalCard {
  width: min(560px, 94vw);
}

.settingsHubBody {
  display: grid;
  gap: 12px;
}

.settingsHubItem {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 46, 84, 0.06);
}

.settingsHubItem:hover {
  border-color: rgba(18, 118, 224, 0.32);
  background: rgba(240, 247, 255, 0.92);
}

.settingsHubIcon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(18, 118, 224, 0.1);
  color: #075aa9;
  font-size: 18px;
  font-weight: 900;
}

.settingsHubText {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settingsHubText strong {
  color: var(--text-strong);
  font-size: 14px;
}

.settingsHubText small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.settingsPermissionPanel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(15, 46, 84, 0.06);
}

.settingsPermissionToggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--text);
  cursor: pointer;
}

.settingsPermissionToggle input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
}

.settingsPermissionToggle span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settingsPermissionToggle strong {
  color: var(--text-strong);
  font-size: 14px;
}

.settingsPermissionToggle small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

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

.chatDrawerNoPermission {
  display: grid;
  gap: 8px;
  max-width: 360px;
  margin: 48px auto;
  padding: 18px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 46, 84, 0.06);
}

.chatDrawerNoPermission strong {
  color: var(--text-strong);
}

.prioritySettingsIntro {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  border-radius: 12px;
  background: rgba(240, 247, 255, 0.72);
}

.prioritySettingsIntro strong {
  color: var(--text-strong);
  font-size: 13px;
}

.prioritySettingsIntro span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.blockedContactsBody {
  display: grid;
  gap: 12px;
}

.blockedContactsHint {
  margin: 0;
}

.blockedContactsList {
  display: grid;
  gap: 10px;
}

.blockedContactItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
}

.blockedContactMain {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.blockedContactMain strong,
.blockedContactMain small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blockedContactMain strong {
  color: var(--text-strong);
  font-size: 14px;
}

.blockedContactMain small {
  color: var(--muted);
  font-weight: 700;
}

.blockedContactMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.blockedContactsEmpty {
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.42);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.72);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.blockedContactsEmpty.error {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(254, 242, 242, 0.78);
  color: #991b1b;
}

.contactBlockBtn {
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.24);
}

.contactBlockBtn:hover,
.contactBlockBtn:focus-visible {
  border-color: rgba(239, 68, 68, 0.42);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}

@media (max-width: 720px) {
  .blockedContactItem {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

.serviceOrderFilters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 180px) auto;
  gap: 10px;
  align-items: end;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.88);
}

.serviceOrderFilters label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.serviceOrderFilters label span {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.serviceOrderFilters input,
.serviceOrderFilters select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.serviceOrderFilters input:focus,
.serviceOrderFilters select:focus {
  border-color: rgba(29, 143, 255, 0.58);
  box-shadow: 0 0 0 3px rgba(29, 143, 255, 0.12);
}

.serviceOrderClearFilters {
  min-height: 38px;
}

@media (max-width: 720px) {
  .serviceOrderFilters {
    grid-template-columns: 1fr;
  }

  .serviceOrderClearFilters {
    width: 100%;
  }
}

.serviceOrdersListWrap {
  max-height: 410px;
}

.serviceOrderListItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.serviceOrderListMain {
  min-width: 0;
}

.serviceOrderListMain strong,
.serviceOrderListMain span,
.serviceOrderListMain p,
.serviceOrderListMain small {
  display: block;
}

.serviceOrderListMain strong {
  color: var(--text-strong);
}

.serviceOrderListMain span {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceOrderListMain p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serviceOrderListMain small {
  margin-top: 5px;
  color: var(--muted);
}

.serviceOrderListActions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .serviceOrderListItem {
    grid-template-columns: 1fr;
  }

  .serviceOrderListActions,
  .serviceOrderStatusActions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .siteHeader .top {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .mobileFilterBtn {
    width: auto;
    min-width: 82px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 800;
  }
}


/* Menu pending indicators */
#btnDesktopSidepanel,
#btnMobileMenu,
.sideItem,
.menuItem {
  position: relative;
}

.pendingCountBadge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1d8fff;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(29, 143, 255, 0.24);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.pendingDotBadge {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #1d8fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(29, 143, 255, 0.12);
}

.sideItem.hasPending,
.menuItem.hasPending {
  padding-right: 34px;
  border-color: rgba(29, 143, 255, 0.24);
  background: rgba(29, 143, 255, 0.08);
}

.menuPendingHint {
  position: relative;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid rgba(29, 143, 255, 0.20);
  border-radius: 12px;
  background: rgba(29, 143, 255, 0.08);
  color: var(--text);
}

.menuPendingHint b,
.menuPendingHint span {
  display: block;
}

.menuPendingHint b {
  color: var(--text-strong);
  font-size: 12px;
}

.menuPendingHint span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.menuPendingArrow {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0d63c9;
  border: 1px solid rgba(29, 143, 255, 0.22);
  font-weight: 900;
}

.menuPendingHintClose {
  border: 1px solid rgba(29, 143, 255, 0.22);
  background: #fff;
  color: var(--text-strong);
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.checkRow {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  margin: 14px 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.checkRow input {
  margin-top: 2px;
}

.passwordFieldWrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.passwordFieldWrap input {
  padding-right: 78px;
}

.passwordToggleBtn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-2);
  cursor: pointer;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
}

.inlineLink {
  border: none;
  background: transparent;
  color: var(--brand-2);
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
}


.chatVideoWrap {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.chatVideoWrap video {
  width: min(320px, 100%);
  max-height: 240px;
  border-radius: 8px;
  background: #0f172a;
}

.chatVideoWrap a,
.chatFileLink {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  max-width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.chatFileLink span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.teamSetupModal { width: min(760px, calc(100vw - 28px)); }
.teamSetupIntro,
.teamSetupQuestion { color: var(--text-strong); font-size: 14px; margin-bottom: 16px; }
.teamSetupQuestion { font-weight: 800; }
.teamSetupChoices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.teamSetupChoice {
  min-height: 170px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text-strong);
  padding: 22px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 9px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.teamSetupChoice:hover,
.teamSetupChoice:focus-visible {
  border-color: var(--brand-3);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, .12);
  transform: translateY(-1px);
  outline: none;
}
.teamSetupChoiceIcon {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 38px;
  align-items: flex-end;
  justify-content: center;
  color: #126fd0;
}
.teamSetupChoiceIcon i {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 11px 11px 5px 5px;
  background: currentColor;
}
.teamSetupChoiceIcon i::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
.teamSetupGroupIcon { width: 54px; }
.teamSetupGroupIcon i {
  position: absolute;
  bottom: 0;
  width: 19px;
  height: 14px;
}
.teamSetupGroupIcon i:nth-child(1) { left: 0; opacity: .66; }
.teamSetupGroupIcon i:nth-child(2) { left: 50%; z-index: 1; transform: translateX(-50%); }
.teamSetupGroupIcon i:nth-child(3) { right: 0; opacity: .66; }
.teamSetupGroupIcon i:nth-child(2)::before { width: 14px; height: 14px; }
.teamSetupBusinessIcon::before {
  content: "";
  width: 28px;
  height: 27px;
  border: 3px solid currentColor;
  border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(currentColor, currentColor) 5px 5px / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 16px 5px / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 5px 15px / 5px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 16px 15px / 5px 5px no-repeat;
}
.teamSetupPersonalIcon::before {
  content: "";
  width: 18px;
  height: 30px;
  border: 3px solid currentColor;
  border-radius: 5px;
}
.teamSetupPersonalIcon::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.teamSetupChoice b { font-size: 16px; }
.teamSetupChoice small { color: var(--muted); line-height: 1.45; }
.teamSetupBack { margin-top: 16px; }
.inviteSequenceList { gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.inviteSequenceItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #b9e5ca;
  border-radius: 8px;
  background: #f1fbf5;
}
.manualIdentityListWrap { margin-top: 12px; max-height: min(48vh, 460px); }
.manualIdentityItem { cursor: pointer; align-items: flex-start; }
.manualIdentityItem input { margin-top: 4px; flex: 0 0 auto; }
.manualIdentityItem.isUnavailable { opacity: .58; cursor: not-allowed; }
.teamIdentityConflict { margin-top: 4px; color: #a23b3b; font-size: 12px; font-weight: 700; }
.inviteSequenceItem span:last-child { display: grid; gap: 2px; }
.inviteSequenceItem small { color: var(--muted); }
.inviteSequenceIcon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #16834b;
  color: #fff;
  font-weight: 900;
}
.teamIdentitySection { margin: 16px 0; }
.teamIdentitySection h3 { font-size: 14px; margin: 0 0 9px; }
.teamIdentitySuggestions { display: grid; gap: 8px; }
.teamIdentitySuggestion,
.teamIdentityComplete { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: #fff; }
.teamIdentitySuggestion { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.teamIdentitySuggestion > div:first-child { display: grid; gap: 4px; }
.teamIdentitySuggestion span,
.teamIdentityComplete { color: var(--muted); font-size: 13px; }
.teamIdentitySuggestionActions,
.identitySuggestionActions { display: flex; flex-wrap: wrap; gap: 8px; }
.identitySuggestionNotice {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3000;
  width: min(460px, calc(100vw - 36px));
  border: 1px solid #b8d6f5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 52px rgba(16, 42, 74, .2);
  padding: 16px;
  display: grid;
  gap: 14px;
}
.identitySuggestionCopy { display: grid; gap: 5px; }
.identitySuggestionCopy span { color: var(--muted); line-height: 1.45; }

.instagramConnectBox {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbff;
  padding: 14px;
}
.instagramAccountLine {
  font-weight: 800;
  color: var(--ink);
}

.instagramSetupBox {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.instagramSetupGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.copyField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}
.copyField .iconBtn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.instagramSetupActions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.instagramSetupActions .hint {
  min-width: min(320px, 100%);
}
@media (max-width: 620px) {
  .instagramSetupGrid { grid-template-columns: 1fr; }
  .instagramSetupActions { align-items: stretch; }
  .instagramSetupActions .btn { width: 100%; }
}

@media (max-width: 620px) {
  .teamSetupChoices { grid-template-columns: 1fr; }
  .teamSetupChoice { min-height: 138px; }
  .teamIdentitySuggestion { align-items: stretch; flex-direction: column; }
  .identitySuggestionActions .btn { flex: 1; }
}

/* Mobile header cleanup after inbox views */
@media (max-width: 760px) {
  .siteHeader {
    min-height: auto;
  }

  .siteHeader .wrap {
    width: 100vw;
    padding: 8px 10px;
  }

  .siteHeader .top {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
  }

  .siteHeader .brandBlock {
    justify-content: center;
    min-width: 0;
    grid-column: 2;
  }

  .siteHeader .brandRow {
    justify-content: center;
    min-width: 0;
  }

  .siteHeader .brandLogo {
    width: 118px;
    max-height: 36px;
  }

  .siteHeader .headerSla {
    display: none;
  }

  .siteHeader .mobileFilterBtn {
    display: none;
  }

  .mobileMenuBtn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .inboxToolbar {
    min-height: 0;
    padding: 8px 10px;
    gap: 8px;
    overflow: visible;
    flex-wrap: wrap;
  }

  .inboxToolbar .filterInlineSearch {
    flex: 1 1 calc(100% - 92px);
    min-width: 0;
    max-width: none;
  }

  .inboxToolbar .filterInlineSearch .filterLabel {
    display: none;
  }

  .inboxToolbar .filterInlineSearch input {
    height: 42px;
    font-size: 14px;
  }

  .inboxToolbar .filterActionBtn {
    order: 1;
    flex: 0 0 auto;
    height: 42px;
    min-width: 82px;
    padding: 0 12px;
    align-self: auto;
    font-size: 13px;
  }

  .inboxToolbar .primary.filterActionBtn {
    display: none;
  }

  .viewTabs {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    gap: 4px;
    padding-bottom: 2px;
  }

  .viewTab {
    height: 32px;
    gap: 5px;
    padding: 0 9px;
    border-radius: 9px;
    font-size: 13px;
  }

  .viewTab span {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
  }
}

/* Mobile filter drawer should fit narrow screens without horizontal clipping */
@media (max-width: 760px) {
  #mobileFilterDrawer .mobileDrawerPanel {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    border-left: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
  }

  #mobileFilterDrawer .mobileDrawerHeader {
    min-width: 0;
    padding: 10px 12px;
  }

  #mobileFilterDrawer .mobileDrawerHeader strong {
    min-width: 0;
    font-size: 15px;
  }

  #mobileFilterDrawer .filterClearBtn {
    height: 34px;
    max-width: 132px;
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mobileFilterDrawer .xbtn {
    flex: 0 0 auto;
  }

  #mobileFilterDrawer .mobileDrawerBody {
    overflow-x: hidden;
    padding: 10px 12px 16px;
  }

  #mobileFilterDrawer .mobileSectionTitle {
    font-size: 12px;
    line-height: 1.2;
  }

  #mobileFilterDrawer .mobileFilterRow,
  #mobileFilterDrawer .mobileFilterRowMini {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
    min-height: 0;
    padding: 9px 10px;
  }

  #mobileFilterDrawer .mobileFilterLabel {
    font-size: 12px;
    line-height: 1.2;
  }

  #mobileFilterDrawer .mobileFilterRow input,
  #mobileFilterDrawer .mobileFilterRow select {
    width: 100%;
    height: 38px;
    font-size: 13px;
  }

  #mobileFilterDrawer .mobileFilterRow .searchFilterControl input {
    padding-right: 86px;
  }
}

@media (max-width: 480px) {
  #mobileFilterDrawer .mobileDrawerPanel {
    left: 0;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  #mobileFilterDrawer .mobileDrawerHeader {
    padding: 12px 14px;
  }

  #mobileFilterDrawer .mobileDrawerHeader strong {
    font-size: 16px;
  }

  #mobileFilterDrawer .filterClearBtn {
    max-width: 96px;
    font-size: 0;
  }

  #mobileFilterDrawer .filterClearBtn::after {
    content: "Limpar";
    font-size: 12px;
  }

  #mobileFilterDrawer .mobileDrawerBody {
    padding: 12px 14px 18px;
  }

  #mobileFilterDrawer .mobileSection {
    gap: 9px;
  }

  #mobileFilterDrawer .mobileFilterRow,
  #mobileFilterDrawer .mobileFilterRowMini {
    padding: 10px 11px;
    border-radius: 13px;
  }

  #mobileFilterDrawer .mobileFilterRow input,
  #mobileFilterDrawer .mobileFilterRow select {
    height: 40px;
    font-size: 14px;
  }
}


@media (max-width: 760px) {
  .slaTooltip {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: min(340px, calc(100vw - 24px));
  }

  .slaHelpWrap:hover .slaTooltip,
  .slaHelp:focus-visible + .slaTooltip,
  .slaHelpWrap:focus-within .slaTooltip {
    transform: translateX(-50%) translateY(0);
  }

  .guideCallouts,
  .quickSteps {
    grid-template-columns: 1fr;
  }
}


.chatMediaViewerPanel {
  position: fixed;
  top: 24px;
  right: min(536px, 100vw);
  bottom: 24px;
  left: 96px;
  z-index: 9002;
  display: none;
  width: auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(13, 45, 92, 0.24);
}

.chatMediaViewerPanel.open {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.chatMediaViewerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(34, 96, 170, 0.10);
  background: rgba(245, 249, 255, 0.92);
}

.chatMediaViewerHeader strong,
.chatMediaViewerHeader span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatMediaViewerHeader strong {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 850;
}

.chatMediaViewerHeader span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.chatMediaViewerClose {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--text-strong);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.chatMediaViewerBody {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  background: #f7f9fc;
}

.chatMediaViewerImage,
.chatMediaViewerVideo {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(13, 45, 92, 0.16);
  background: #111827;
}

.chatMediaViewerImage {
  object-fit: contain;
}

.chatMediaViewerVideo {
  width: 100%;
}

.chatMediaViewerError {
  display: grid;
  gap: 6px;
  text-align: center;
  color: var(--muted);
}

.chatMediaViewerError strong {
  color: var(--text-strong);
}

.chatMediaViewerFooter {
  padding: 12px 14px;
  border-top: 1px solid rgba(34, 96, 170, 0.10);
  background: rgba(255, 255, 255, 0.95);
}

.chatMediaViewerDownload {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(29, 143, 255, 0.22);
  border-radius: 999px;
  color: var(--brand-2);
  background: rgba(29, 143, 255, 0.08);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.chatMediaPlaceholder.mediaOpened {
  border-color: rgba(28, 169, 97, 0.28);
  background: rgba(28, 169, 97, 0.08);
}

@media (max-width: 1060px) {
  .chatMediaViewerPanel {
    top: 92px;
    left: 12px;
    right: 12px;
    bottom: 96px;
    width: auto;
    min-width: 0;
  }
}


.waConnectionNotice {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 9200;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 10px 13px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-strong);
  box-shadow: 0 14px 34px rgba(13, 45, 92, 0.18);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.waConnectionNotice.show {
  opacity: 1;
  transform: translateY(0);
}

.waConnectionNoticeDot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f2b81d;
  box-shadow: 0 0 0 5px rgba(242, 184, 29, 0.16);
  animation: waNoticePulse 1.2s ease-in-out infinite;
}

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

@keyframes waNoticePulse {
  0%, 100% { transform: scale(0.92); opacity: 0.72; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 680px) {
  .waConnectionNotice {
    left: 12px;
    right: 12px;
    bottom: 76px;
    justify-content: center;
    border-radius: 14px;
  }
}

.waTopConnectionAlert {
  display: none;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: 14px;
  background: rgba(255, 248, 235, 0.96);
  color: #854d0e;
  box-shadow: 0 10px 24px rgba(146, 64, 14, 0.08);
}

.waTopConnectionAlert.show {
  display: flex;
}

.waTopConnectionAlert.isTransient {
  border-color: rgba(34, 96, 170, 0.16);
  background: rgba(242, 247, 255, 0.96);
  color: #315b8d;
}

.waTopConnectionDot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f2b81d;
  box-shadow: 0 0 0 5px rgba(242, 184, 29, 0.16);
  animation: waNoticePulse 1.2s ease-in-out infinite;
}

.waTopConnectionAlert.isTransient .waTopConnectionDot {
  background: #1d78ff;
  box-shadow: 0 0 0 5px rgba(29, 120, 255, 0.14);
}

.waTopConnectionText {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 850;
}

.waTopConnectionAction {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(217, 119, 6, 0.26);
  border-radius: 999px;
  background: #fff;
  color: #9a3412;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.waTopConnectionAction:hover,
.waTopConnectionAction:focus-visible {
  border-color: rgba(217, 119, 6, 0.5);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12);
}

.waMenuAlertBadge {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #f2b81d;
  color: #5c3200;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(242, 184, 29, 0.18);
}

.menuItem > .waMenuAlertBadge,
.sideItem > .waMenuAlertBadge {
  margin-left: auto;
}

.menuItem.hasWaAttention,
.sideItem.hasWaAttention {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(255, 248, 235, 0.72);
}

.modernRailBtn > .waMenuAlertBadge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 19px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
  z-index: 2;
}

@media (max-width: 760px) {
  .waTopConnectionAlert {
    margin: 8px 10px;
    border-radius: 12px;
  }

  .waTopConnectionText {
    white-space: normal;
  }
}


.serviceOrdersViewBtn {
  min-width: 58px;
}

.mobileHeaderOsBtn {
  display: none;
}

.mobileHeaderOsBtn.active {
  background: #0d63c9;
  border-color: #0d63c9;
  color: #fff;
}

body.appModeOrders .board {
  display: none;
}

.appViewTransitioning .board,
.appViewTransitioning .serviceOrdersBoardView {
  animation: appViewSoftFade 180ms ease-out;
}

@keyframes appViewSoftFade {
  from { opacity: .55; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.serviceOrdersBoardView {
  padding: 14px 18px 22px;
  min-height: calc(100vh - 168px);
}

.serviceOrdersBoardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(124, 152, 184, .24);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 42px rgba(34, 74, 118, .08);
}

.serviceOrdersBoardEyebrow {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #e8f3ff;
  color: #075cab;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.serviceOrdersBoardHeader h2 {
  margin: 8px 0 4px;
  font-size: 24px;
  line-height: 1.1;
  color: #122a45;
}

.serviceOrdersBoardHeader p {
  margin: 0;
  color: #5f7898;
  font-weight: 700;
}

.serviceOrdersBoardFilters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(124, 152, 184, .22);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
}

.serviceOrdersBoardFilters label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #56708f;
  font-size: 12px;
  font-weight: 800;
}

.serviceOrdersBoardFilters input,
.serviceOrdersBoardFilters select {
  width: 100%;
  height: 40px;
  border: 1px solid #cfe0f2;
  border-radius: 12px;
  background: #fff;
  color: #112b46;
  font: inherit;
  font-weight: 700;
  padding: 0 12px;
  outline: none;
}

.serviceOrdersBoardFilters input:focus,
.serviceOrdersBoardFilters select:focus {
  border-color: #78b8ff;
  box-shadow: 0 0 0 3px rgba(34, 133, 231, .12);
}

.serviceOrdersBoardList {
  display: grid;
  gap: 10px;
}

.serviceOrdersBoardItem,
.serviceOrdersBoardEmpty {
  border: 1px solid rgba(124, 152, 184, .22);
  border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 12px 34px rgba(34, 74, 118, .07);
}

.serviceOrdersBoardItem {
  padding: 16px;
}

.serviceOrdersBoardItemTop,
.serviceOrdersBoardActions,
.serviceOrdersBoardMeta,
.serviceOrdersBoardBadges,
.serviceOrdersBoardTags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.serviceOrdersBoardItemTop {
  justify-content: space-between;
  align-items: flex-start;
}

.serviceOrdersBoardCode {
  color: #075cab;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.serviceOrdersBoardItem h3 {
  margin: 4px 0 2px;
  font-size: 17px;
  line-height: 1.2;
  color: #102943;
}

.serviceOrdersBoardItem p {
  margin: 0;
  color: #587391;
}

.serviceOrdersBoardSummary {
  margin-top: 10px !important;
  color: #203a56 !important;
  font-weight: 700;
}

.serviceOrdersBoardTags {
  margin-top: 12px;
}

.serviceOrderTag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #edf6ff;
  border: 1px solid #d2e7fb;
  color: #123352;
  font-size: 12px;
  font-weight: 800;
}

.serviceOrderTag.muted {
  color: #6c7f95;
}

.serviceOrderPriority {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #d6e4f4;
  background: #f7fbff;
  color: #47627f;
  font-size: 12px;
  font-weight: 900;
}

.serviceOrderPriority.critical,
.serviceOrderPriority.urgent {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b4232f;
}

.serviceOrderPriority.high {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #b45309;
}

.serviceOrdersBoardMeta {
  margin-top: 12px;
  color: #6a82a0;
  font-size: 12px;
  font-weight: 800;
}

.serviceOrdersBoardActions {
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #d8e5f3;
}

.serviceOrdersBoardEmpty {
  padding: 34px;
  text-align: center;
  color: #627d9a;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .serviceOrdersBoardFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .serviceOrdersBoardView {
    padding: 10px;
  }
  .serviceOrdersBoardHeader,
  .serviceOrdersBoardItemTop {
    display: grid;
  }
  .serviceOrdersBoardFilters {
    grid-template-columns: 1fr;
  }
  .serviceOrdersBoardActions {
    justify-content: flex-start;
  }
}


body.appModeOrders .serviceOrdersBoardHeader,
body.appModeOrders .serviceOrdersBoardFilters {
  display: none;
}

body.appModeOrders .viewTabs [data-os-count],
body.appModeOrders .viewTabs [data-view-count] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #cfe9ff;
  color: #075cab;
  font-size: 12px;
  font-weight: 900;
}

body.appModeOrders .serviceOrdersBoardView {
  height: calc(100vh - 156px);
  min-height: 0;
  overflow-y: auto;
  padding-top: 12px;
  scrollbar-width: thin;
}

.serviceOrdersClientCard {
  border: 1px solid rgba(124, 152, 184, .22);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 34px rgba(34, 74, 118, .07);
  padding: 14px;
}

.serviceOrdersClientHeader,
.serviceOrdersClientMeta,
.serviceOrdersClientTags,
.serviceOrdersInlineTop,
.serviceOrdersInlineActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.serviceOrdersClientHeader {
  justify-content: space-between;
}

.serviceOrdersClientTitle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.serviceOrdersClientTitle strong {
  color: #102943;
  font-size: 17px;
}

.serviceOrdersClientTitle span,
.serviceOrdersClientCount {
  color: #657f9d;
  font-size: 12px;
  font-weight: 800;
}

.serviceOrdersClientTags {
  margin-top: 8px;
}

.serviceOrdersInlineList {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.serviceOrdersInlineItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #dce8f6;
  border-radius: 12px;
  background: #fafdff;
}

.serviceOrdersInlineTop {
  margin-bottom: 4px;
}

.serviceOrdersInlineTop strong {
  color: #075cab;
  font-size: 13px;
  font-weight: 900;
}

.serviceOrdersInlineMain p {
  margin: 0 0 4px;
  color: #213b58;
  font-weight: 700;
}

.serviceOrdersInlineMain small {
  color: #6d86a3;
  font-weight: 800;
}

@media (max-width: 920px) {
  body.appModeOrders .serviceOrdersBoardView {
    height: auto;
    overflow: visible;
  }
  .serviceOrdersInlineItem {
    grid-template-columns: 1fr;
  }
  .serviceOrdersInlineActions {
    justify-content: flex-start;
  }
}


/* os-board-v2-overrides */
body.appModeOrders .serviceOrdersBoardList {
  gap: 10px;
}

body.appModeOrders .serviceOrdersBoardEmpty {
  margin-top: 0;
}

/* os-board-v4-compact-typography */
body.appModeOrders .serviceOrdersInlineItem {
  padding: 8px 10px;
  gap: 10px;
}

body.appModeOrders .serviceOrdersInlineTop {
  margin-bottom: 3px;
}

body.appModeOrders .serviceOrdersInlineTop strong {
  font-size: 12px;
  line-height: 1.2;
}

body.appModeOrders .serviceOrdersInlineTop .serviceOrderStatus {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
}

body.appModeOrders .serviceOrdersInlineMain p {
  margin: 0 0 3px;
  font-size: 13px;
  line-height: 1.28;
  font-weight: 650;
  color: #16314d;
}

body.appModeOrders .serviceOrdersInlineMain small {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 650;
  color: #6c829d;
}

body.appModeOrders .serviceOrdersInlineActions .btn2,
body.appModeOrders .serviceOrdersInlineActions .serviceOrderStatusBtn {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}


/* os-contact-button */
.chatDrawerActions #chatDrawerViewOrders {
  white-space: nowrap;
}


/* os-pending-badge */
#chatDrawerViewOrders,
.serviceOrdersShortcut {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.serviceOrdersPendingBubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}

.serviceOrdersShortcut .serviceOrdersPendingBubble {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
}

@media (max-width: 760px) {
  .siteHeader .brandBlock {
    justify-content: center;
  }

  .siteHeader .brandRow {
    display: inline-flex;
    width: auto;
    justify-content: center;
    gap: 0;
    align-items: center;
  }

  .mobileHeaderOsBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    justify-self: end;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    padding: 0;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .filtersShell .serviceOrdersViewBtn {
    display: none;
  }
}

/* contact-profile-drawer */
.chatDrawerTitleLine {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.contactEditBtn,
.cardIconBtn,
.contactMoreBtn {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 96, 170, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #0b5fb8;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(18, 65, 123, 0.08);
}

.contactEditBtn:hover,
.cardIconBtn:hover,
.contactMoreBtn:hover {
  background: #eef6ff;
  border-color: rgba(29, 143, 255, 0.38);
}

.contactMoreMenuWrap {
  position: relative;
  flex: 0 0 auto;
}

.contactMoreMenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 9600;
  min-width: 184px;
  padding: 6px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(18, 65, 123, 0.16);
}

.contactMoreMenuItem {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.contactMoreMenuItem:hover {
  background: #f4f8ff;
}

.contactMoreMenuItem.dangerSoft {
  color: #a11a1a;
}

.contactMoreMenuItem.dangerSoft:hover {
  background: #fff1f1;
}

.cardNameLine {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.cardNameLine .name {
  min-width: 0;
}

.card .cardtop { display: block; position: relative; }
.card .cardIdentityLine { align-items: center; gap: 10px; min-width: 0; width: 100%; padding-right: 34px; box-sizing: border-box; }
.card .cardIdentityLine .name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .cardCornerMenu { position: absolute; right: 0; top: 0; }
.cardStatusLine { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.card .cardStatusLine > .channelBadge,
.card .cardStatusLine > .priorityBadge,
.card .cardStatusLine > .badge {
  box-sizing: border-box;
  height: 22px;
  min-height: 22px;
  min-width: 0;
  padding: 0 8px;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
}
.card .cardtop > .meta { margin-top: 7px; }

.cardIconBtn,
.cardContactMoreBtn {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: none;
  opacity: 0.78;
}

.cardIconBtn:hover {
  opacity: 1;
}

.contactProfileBackdrop {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(11, 25, 47, 0.16);
  z-index: 9100;
}

.contactProfileBackdrop.open {
  display: block;
}

.contactProfileDrawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9101;
  width: min(560px, 100vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.99));
  border-left: 1px solid rgba(34, 96, 170, 0.16);
  box-shadow: -18px 0 48px rgba(18, 65, 123, 0.18);
  transform: translateX(104%);
  transition: transform 0.2s ease;
}

.contactProfileDrawer.open {
  transform: translateX(0);
}

.contactProfileHeader {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(34, 96, 170, 0.10);
  background: rgba(236, 245, 255, 0.78);
}

.contactProfileHeader strong {
  display: block;
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 850;
}

.contactProfileHeader span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.contactProfileForm {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 18px;
  display: grid;
  gap: 14px;
}

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

.contactProfileField,
.contactProfileSection {
  min-width: 0;
}

.contactProfileField {
  display: grid;
  gap: 6px;
}

.contactProfileFieldFull,
.contactProfileZipField {
  grid-column: 1 / -1;
}

.contactProfileField span {
  color: #4f6c8d;
  font-size: 12px;
  font-weight: 800;
}

.contactProfileField input,
.contactProfileField select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(34, 96, 170, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text-strong);
  padding: 7px 10px;
  font: inherit;
  outline: none;
}

.contactProfileField input:focus,
.contactProfileField select:focus {
  border-color: rgba(29, 143, 255, 0.54);
  box-shadow: 0 0 0 3px rgba(29, 143, 255, 0.10);
}

.contactProfileField input[readonly] {
  background: #eef4fb;
  color: #57718e;
  cursor: not-allowed;
}

.contactProfileSection {
  padding: 13px;
  border: 1px solid rgba(34, 96, 170, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.contactProfileSection h3 {
  margin: 0 0 12px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 850;
}

.contactProfileInlineInput {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.contactProfileStatus {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  background: #eef6ff;
  color: #225b94;
  font-size: 13px;
  line-height: 1.35;
}

.contactProfileStatus.error {
  border-color: rgba(225, 29, 72, 0.22);
  background: #fff1f2;
  color: #9f1239;
}

.contactProfileStatus.success {
  border-color: rgba(5, 150, 105, 0.22);
  background: #ecfdf5;
  color: #047857;
}

.contactProfileFooter {
  position: sticky;
  bottom: -18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 0 0;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0), rgba(248, 251, 255, 0.98) 28%);
}

@media (max-width: 760px) {
  .contactProfileDrawer {
    width: 100vw;
  }

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

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

/* contact-profile-search-and-focus */
.contactProfileDrawer.alongsideChat {
  right: min(520px, 52vw);
  width: min(500px, calc(100vw - 520px));
  z-index: 9002;
  box-shadow: -12px 0 28px rgba(18, 65, 123, 0.14);
}

.contactProfileStatus:focus {
  outline: 3px solid rgba(29, 143, 255, 0.22);
  outline-offset: 2px;
}

.contactProfileStatus.error:focus {
  outline-color: rgba(225, 29, 72, 0.22);
}

@media (max-width: 1039px) {
  .contactProfileDrawer.alongsideChat {
    right: 0;
    width: min(560px, 100vw);
    z-index: 9101;
  }
}


/* clients-board */
body.appModeClients .board,
body.appModeClients #serviceOrdersBoardView,
body.appModeClients .filtersShell {
  display: none;
}

body.appModeClients .clientsBoardView {
  display: block;
}

.clientsBoardView[hidden] {
  display: none !important;
}

.appViewTransitioning .clientsBoardView {
  animation: appViewSoftFade 180ms ease-out;
}

.clientsBoardView {
  height: calc(100vh - 156px);
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 22px;
  scrollbar-width: thin;
}

.clientsBoardHeader {
  display: grid;
  gap: 12px;
  padding: 4px 10px 10px;
}

.clientsBoardTopline,
.clientsBoardControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.clientsBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b829d;
  font-size: 14px;
  font-weight: 800;
}

.clientsBreadcrumb strong {
  color: #102943;
  font-size: 20px;
  line-height: 1.1;
}

.clientsBreadcrumb button {
  border: 0;
  background: transparent;
  color: #075cab;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.clientsBreadcrumb button:hover {
  text-decoration: underline;
}

.clientsMobileClose {
  display: none;
}

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

.clientsSearchControl {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 860px;
  color: #607892;
  font-size: 12px;
  font-weight: 900;
}

.clientsSearchControl span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.clientsSearchControl input {
  width: min(520px, 60vw);
  min-width: 380px;
  height: 42px;
  border: 1px solid #cfe0f2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  color: #183653;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  padding: 0 14px;
}

.clientsSearchControl input:focus {
  border-color: #87bfff;
  box-shadow: 0 0 0 3px rgba(13, 99, 201, .12);
}

.clientsGridCard {
  margin-top: 14px;
  border: 1px solid rgba(124, 152, 184, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 34px rgba(34, 74, 118, .07);
  overflow: hidden;
}

.clientsGrid {
  width: 100%;
}

.clientsGridHeader,
.clientsGridRow {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(140px, .8fr) minmax(220px, 1.4fr) minmax(150px, auto);
  gap: 12px;
  align-items: center;
}

.clientsGridHeader {
  padding: 12px 16px;
  background: #f2f7fd;
  color: #5f7898;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.clientsGridRow {
  min-height: 58px;
  padding: 12px 16px;
  border-top: 1px solid #e1ebf6;
  color: #183653;
}

.clientsGridRow strong {
  color: #102943;
}

.clientsGridMuted {
  color: #7b91aa;
  font-weight: 700;
}

.clientsGridActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.clientsPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #e1ebf6;
  color: #5f7898;
  font-weight: 800;
}

.clientsPaginationControls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.clientsTotalInfo {
  color: #5f7898;
  font-size: 13px;
  font-weight: 800;
}

.btn.danger {
  border-color: #fecaca;
  background: #ef4444;
  color: #fff;
}

.btn.danger:hover {
  background: #dc2626;
}

.dangerBox {
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff1f2;
  color: #991b1b;
  font-weight: 800;
}

.modalText {
  color: #24415f;
  font-weight: 700;
}

@media (max-width: 760px) {
  .clientsBoardView {
    height: auto;
    overflow: visible;
    padding: 10px 12px 18px;
  }

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

  .clientsBoardTopline,
  .clientsBoardControls,
  .clientsPagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .clientsPaginationControls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .clientsMobileClose {
    display: inline-flex;
  }

  .clientsDesktopBack {
    display: none;
  }

  .clientsSearchControl {
    align-items: stretch;
    flex-direction: column;
    max-width: none;
    width: 100%;
  }

  .clientsSearchControl input {
    min-width: 0;
    width: 100%;
  }

  .clientsGridHeader {
    display: none;
  }

  .clientsGridRow {
    gap: 6px;
  }

  .clientsGridRow > span::before {
    display: block;
    margin-bottom: 2px;
    color: #7b91aa;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .clientsGridRow > span:nth-child(1)::before { content: "Nome capturado"; }
  .clientsGridRow > span:nth-child(2)::before { content: "Documento"; }
  .clientsGridRow > span:nth-child(3)::before { content: "Nome / Razão social"; }

  .clientsGridActions,
  .clientsPagination {
    justify-content: flex-start;
  }
}


.btn.dangerSoft,
.btn2.dangerSoft {
  border-color: #fecaca;
  color: #b91c1c;
}

.btn.dangerSoft:hover,
.btn2.dangerSoft:hover {
  background: #fff1f2;
  color: #991b1b;
}

/* Operational metrics */
.slaInline {
  cursor: pointer;
}

.slaSummaryAction {
  border: 1px solid rgba(34, 96, 170, 0.18);
  background: rgba(255, 255, 255, 0.72);
  color: #075cae;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(13, 99, 201, 0.08);
}

.slaSummaryAction:hover,
.slaSummaryAction:focus-visible {
  border-color: rgba(13, 99, 201, 0.38);
  background: #fff;
  outline: none;
}

.operationsSummaryOverlay {
  --operations-drawer-width: min(560px, calc(100vw - 32px));
}

.operationsSummaryCard {
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
}

@media (min-width: 861px) {
  .operationsSummaryOverlay {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: rgba(11, 25, 47, 0.16);
    backdrop-filter: blur(2px);
  }

  .operationsSummaryCard {
    width: var(--operations-drawer-width);
    height: 100dvh;
    max-height: none;
    border-radius: 0 22px 22px 0;
    border-left: 0;
    box-shadow: 18px 0 52px rgba(15, 23, 42, 0.22);
    animation: operationsDrawerIn 170ms ease-out both;
  }

  .operationsSummaryHeader {
    min-height: 76px;
  }

  .operationsSummaryBody {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .operationsSummaryContent {
    min-width: 0;
    padding-bottom: 18px;
  }

  .operationsSummaryCard .metricsKpiGrid,
  .operationsSummaryCard .metricsSplitGrid,
  .operationsSummaryCard .metricsAlertGrid {
    grid-template-columns: 1fr;
  }

  .operationsSummaryCard .metricsKpiCard {
    min-height: 0;
  }

  .operationsSummaryCard .metricsPanel,
  .operationsSummaryCard .metricsKpiCard,
  .operationsSummaryCard .metricsAlert,
  .operationsSummaryCard .metricsListRow {
    min-width: 0;
  }

  .operationsSummaryCard .metricsPanelHeader,
  .operationsSummaryCard .metricsListRow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .operationsSummaryCard .metricsPanelHeader > div,
  .operationsSummaryCard .metricsListRow span,
  .operationsSummaryCard .metricsListRow small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .operationsSummaryCard .metricsChart {
    width: 100%;
    grid-auto-columns: minmax(22px, 1fr);
    gap: 6px;
    overflow-x: hidden;
  }

  .operationsSummaryCard .metricsChartColumn {
    min-width: 0;
    gap: 6px;
  }

  .operationsSummaryCard .metricsChartBars {
    gap: 3px;
  }

  .operationsSummaryCard .metricsChartBars span {
    width: 8px;
  }

  .operationsSummaryCard .metricsChartColumn small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@keyframes operationsDrawerIn {
  from {
    opacity: 0.82;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.operationsSummaryHeader {
  align-items: flex-start;
}

.operationsSummarySubtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.operationsSummaryPeriods {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(34, 96, 170, 0.08);
  background: rgba(248, 251, 255, 0.72);
  overflow-x: auto;
}

.metricsPeriodBtn {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(34, 96, 170, 0.16);
  background: #fff;
  color: var(--text-strong);
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.metricsPeriodBtn.active {
  border-color: rgba(13, 99, 201, 0.34);
  background: #e8f4ff;
  color: #075cae;
}

.operationsSummaryBody {
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.operationsSummaryLoading,
.metricsEmpty {
  padding: 18px;
  border: 1px dashed rgba(34, 96, 170, 0.2);
  border-radius: 14px;
  color: var(--muted);
  font-weight: 750;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
}

.operationsSummaryContent {
  display: grid;
  gap: 14px;
}

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

.metricsKpiCard,
.metricsPanel,
.metricsAlert {
  border: 1px solid rgba(34, 96, 170, 0.12);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(18, 65, 123, 0.08);
}

.metricsKpiCard {
  display: grid;
  gap: 7px;
  padding: 14px;
  min-height: 112px;
}

.metricsKpiCard span,
.metricsPanelHeader span,
.metricsListRow small,
.metricsAlert span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.metricsKpiCard strong {
  color: var(--text-strong);
  font-size: 26px;
  font-weight: 920;
  letter-spacing: 0;
}

.metricsKpiCard small {
  color: #537095;
  font-size: 12px;
  font-weight: 760;
}

.metricsPanel {
  padding: 14px;
}

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

.metricsPanelHeader strong {
  display: block;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 900;
}

.metricsPanelHeader b {
  color: #075cae;
  font-size: 22px;
  font-weight: 920;
}

.metricsSlaBar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef6;
}

.metricsSlaBar span {
  display: block;
  min-width: 0;
  transition: width 0.24s ease;
}

.metricsSlaWithin {
  background: linear-gradient(90deg, #2cc783, #7be6b2);
}

.metricsSlaOutside {
  background: linear-gradient(90deg, #ffb36b, #f05f6a);
}

.metricsSlaLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  color: #537095;
  font-size: 12px;
  font-weight: 760;
}

.metricsSlaLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.metricsSlaLegend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}

.metricsSlaLegend .ok { background: #2cc783; }
.metricsSlaLegend .warn { background: #f08a35; }
.metricsSlaLegend .neutral { background: #8aa3c1; }

.metricsLongestList {
  display: grid;
}

.metricsWaitRow {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid rgba(34, 96, 170, 0.12);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.metricsWaitRow:hover,
.metricsWaitRow:focus-visible {
  background: rgba(232, 244, 255, 0.72);
  outline: none;
}

.metricsWaitRow:first-child {
  padding-top: 0;
  border-top: 0;
}

.metricsWaitRank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f4ff;
  color: #075cae;
  font-size: 12px;
  font-weight: 900;
}

.metricsWaitMain,
.metricsWaitTitle {
  min-width: 0;
}

.metricsWaitTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.metricsWaitTitle strong {
  overflow-wrap: anywhere;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 900;
}

.metricsWaitTitle b {
  flex: 0 0 auto;
  color: #b42332;
  font-size: 13px;
  font-weight: 920;
}

.metricsWaitMain blockquote {
  margin: 7px 0 8px;
  padding: 0 0 0 9px;
  border-left: 3px solid #8fc9ff;
  color: #365474;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.metricsWaitMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: #6a82a3;
  font-size: 10px;
  font-weight: 760;
}

.metricsWaitMeta span:first-child {
  color: #075cae;
}

.metricsChart {
  min-height: 168px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(34px, 1fr);
  align-items: end;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 2px 2px;
}

.metricsChartColumn {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-width: 34px;
}

.metricsChartBars {
  height: 128px;
  display: flex;
  align-items: end;
  gap: 4px;
}

.metricsChartBars span {
  width: 10px;
  border-radius: 999px 999px 4px 4px;
}

.metricsChartBars .received {
  background: linear-gradient(180deg, #7fc5ff, #1d8fff);
}

.metricsChartBars .responded {
  background: linear-gradient(180deg, #8ce7bd, #2cc783);
}

.metricsChartColumn small {
  color: #6a82a3;
  font-size: 10px;
  font-weight: 800;
}

.metricsSplitGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.metricsList {
  display: grid;
  gap: 8px;
}

.metricsListRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(34, 96, 170, 0.1);
  background: rgba(248, 251, 255, 0.78);
}

.metricsListRow span {
  color: var(--text-strong);
  font-weight: 850;
}

.metricsListRow b {
  color: #075cae;
  font-size: 12px;
  font-weight: 900;
}

.metricsListRow small {
  grid-column: 1 / -1;
}

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

.metricsAlert {
  padding: 12px;
  display: grid;
  gap: 7px;
}

.metricsAlert strong {
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 920;
}

.metricsAlert.warning strong { color: #a86700; }
.metricsAlert.danger strong { color: #b42332; }

@media (max-width: 860px) {
  .operationsSummaryCard {
    width: calc(100vw - 18px);
  }

  .metricsKpiGrid,
  .metricsSplitGrid,
  .metricsAlertGrid {
    grid-template-columns: 1fr;
  }

  .metricsKpiCard {
    min-height: 0;
  }

  .metricsChart {
    grid-auto-columns: minmax(42px, 46px);
  }

  .metricsWaitTitle {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

.billingModalCard {
  width: min(1120px, 96vw);
}

.billingPlans {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.billingPlanCard {
  align-items: stretch;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(170, 199, 232, 0.86);
  border-radius: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 380px;
  padding: 22px;
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.billingPlanCard:hover,
.billingPlanCard.selected {
  border-color: rgba(18, 115, 217, 0.72);
  box-shadow: 0 18px 38px rgba(20, 61, 115, 0.14);
  transform: translateY(-2px);
}

.billingPlanCard.selected,
.billingPlanPopular {
  background: linear-gradient(180deg, rgba(232, 245, 255, 0.96), rgba(246, 251, 255, 0.98));
}

.billingPlanCard input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.billingPlanName {
  color: #06172d;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
}

.billingPlanTop {
  align-items: baseline;
  color: #06172d;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.billingPlanTop strong {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.95;
}

.billingPlanTop small {
  color: #657991;
  font-size: 12px;
  font-weight: 800;
}

.billingPlanLead {
  color: #122b49;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
  min-height: 40px;
}

.billingPlanAction {
  align-items: center;
  background: #07111f;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  text-align: center;
}

.billingPlanCard.selected .billingPlanAction {
  background: linear-gradient(135deg, var(--brand-2), var(--brand-3));
}

.billingPlanFeatures {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.billingPlanFeatures li {
  color: #203a59;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  padding-left: 24px;
  position: relative;
}

.billingPlanFeatures li::before {
  align-items: center;
  background: rgba(18, 115, 217, 0.12);
  border: 1px solid rgba(18, 115, 217, 0.22);
  border-radius: 999px;
  color: #0062bd;
  content: "✓";
  display: inline-flex;
  font-size: 10px;
  font-weight: 950;
  height: 16px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 1px;
  width: 16px;
}

.billingPlanBadge {
  background: rgba(18, 115, 217, 0.12);
  border-radius: 999px;
  color: #005fc1;
  font-size: 10px;
  font-weight: 950;
  padding: 7px 10px;
  position: absolute;
  right: 18px;
  top: 18px;
}

.billingQuoteHint {
  color: #557093;
  font-size: 12px;
  font-weight: 800;
  margin: 14px 0 0;
}

.billingQuoteHint a {
  color: #0057a8;
  font-weight: 900;
}

@media (max-width: 860px) {
  .billingPlans {
    grid-template-columns: 1fr;
  }

  .billingPlanCard {
    min-height: 0;
  }
}


.waAccountsPanel {
  border: 1px solid rgba(120, 164, 214, 0.35);
  border-radius: 18px;
  background: rgba(247, 251, 255, 0.78);
  padding: 14px;
  margin: 0 0 14px;
}

.waAccountsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.waAccountsHeader strong {
  display: block;
  color: #0b2341;
  font-size: 14px;
}

.waAccountsHeader span {
  display: block;
  color: #5f7696;
  font-size: 12px;
  margin-top: 2px;
}

.waAccountsList {
  display: grid;
  gap: 8px;
}

.waAccountItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(120, 164, 214, 0.32);
  border-radius: 14px;
  background: #fff;
}

.waAccountItem.is-active {
  border-color: #1d7eea;
  box-shadow: 0 10px 28px rgba(29, 126, 234, 0.12);
}

.waAccountItem.has-qr {
  align-items: start;
}

.waAccountSelect {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}

.waAccountSelect strong {
  display: block;
  color: #071c34;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waAccountSelect span {
  display: block;
  color: #5f7696;
  font-size: 12px;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waAccountActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.waAccountActions .btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.waAccountActions .btn.is-active {
  box-shadow: 0 0 0 3px rgba(29, 126, 234, 0.16);
}

.waAccountQrSlot {
  grid-column: 1 / -1;
}

.waAccountQrSlot[hidden] {
  display: none;
}

.waAccountQrPanel {
  display: grid;
  gap: 12px;
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(29, 126, 234, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(239, 247, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.waAccountQrHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.waAccountQrHeader strong {
  display: block;
  color: #071c34;
  font-size: 13px;
}

.waAccountQrHeader span {
  display: block;
  margin-top: 2px;
  color: #5f7696;
  font-size: 12px;
}

.waAccountQrCollapse {
  appearance: none;
  border: 0;
  background: transparent;
  color: #006bd6;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 0;
}

.waAccountQrBody {
  display: flex;
  justify-content: center;
}

.waAccountQrImg {
  width: 248px;
  max-width: 100%;
}

.waAccountQrSpinner {
  min-height: 180px;
  justify-content: center;
  color: #285c91;
  font-size: 13px;
  text-align: center;
}

.waAccountQrHint {
  margin: 0;
  text-align: center;
}

.waAccountStatus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
  color: #5f7696;
  font-size: 12px;
  font-weight: 800;
}

.waAccountStatus::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9ca3af;
}

.waAccountStatus.connected::before { background: #22c55e; }
.waAccountStatus.connecting::before,
.waAccountStatus.qr::before,
.waAccountStatus.degraded::before { background: #f59e0b; }
.waAccountStatus.error::before,
.waAccountStatus.disconnected::before { background: #ef4444; }

.waAccountEmpty {
  color: #5f7696;
  font-size: 13px;
  padding: 8px 2px;
}

@media (max-width: 680px) {
  .waAccountItem { grid-template-columns: 1fr; }
  .waAccountActions { justify-content: flex-start; }
  .waAccountsHeader { align-items: flex-start; flex-direction: column; }
  .waAccountQrHeader { flex-direction: column; }
}


/* service-orders-kanban */
.serviceOrdersLayoutBtn {
  display: none;
  min-width: 92px;
}

body.appModeOrders .serviceOrdersLayoutBtn {
  display: inline-flex;
}

.serviceOrdersLayoutBtn.active {
  border-color: #9fd0ff;
  background: #e8f3ff;
  color: #075cab;
}

.serviceOrdersBoardList.kanbanMode {
  display: block;
}

.serviceOrdersKanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
  align-items: start;
}

.serviceOrdersKanbanColumn {
  min-width: 0;
  border: 1px solid rgba(124, 152, 184, .22);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 12px 34px rgba(34, 74, 118, .06);
  overflow: hidden;
}

.serviceOrdersKanbanColumn > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #dce8f6;
  background: #f7fbff;
}

.serviceOrdersKanbanColumn > header span {
  display: block;
  color: #102943;
  font-size: 14px;
  font-weight: 900;
}

.serviceOrdersKanbanColumn > header small {
  color: #6c829d;
  font-size: 11px;
  font-weight: 800;
}

.serviceOrdersKanbanColumn > header b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #dbeeff;
  color: #075cab;
  font-size: 13px;
}

.serviceOrdersKanbanColumn-open > header { background: #fffaf0; }
.serviceOrdersKanbanColumn-resolved > header { background: #f0fdf4; }
.serviceOrdersKanbanColumn-canceled > header { background: #fff1f2; }

.serviceOrdersKanbanCards {
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 238px);
  overflow: auto;
  padding: 10px;
  scrollbar-width: thin;
}


.serviceOrdersPendingBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 5px;
  border: 1px solid #f6c767;
  border-radius: 999px;
  background: #fff7df;
  color: #9a5b00;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.serviceOrdersKanbanCard.hasPendingResponse,
.serviceOrdersInlineItem.hasPendingResponse,
.serviceOrdersClientCard.hasPendingResponse {
  border-color: #f6c767;
  box-shadow: 0 12px 30px rgba(194, 120, 3, .12);
}

.serviceOrdersKanbanCard {
  display: grid;
  gap: 8px;
  border: 1px solid #dce8f6;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(34, 74, 118, .07);
  cursor: pointer;
}

.serviceOrdersKanbanCard:hover,
.serviceOrdersKanbanCard:focus-visible,
.serviceOrdersInlineItem:hover,
.serviceOrderListItem:hover {
  border-color: #9fd0ff;
  box-shadow: 0 14px 34px rgba(13, 99, 201, .12);
  outline: none;
}

.serviceOrdersKanbanTop,
.serviceOrdersKanbanFooter,
.serviceOrdersKanbanAudit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.serviceOrdersKanbanTop {
  justify-content: space-between;
}

.serviceOrdersKanbanTop strong {
  color: #075cab;
  font-size: 12px;
  font-weight: 900;
}

.serviceOrdersKanbanCard h3 {
  margin: 0;
  color: #102943;
  font-size: 15px;
  line-height: 1.2;
}

.serviceOrdersKanbanCard p {
  margin: 0;
  color: #213b58;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.32;
}

.serviceOrdersKanbanAudit {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  color: #6c829d;
  font-size: 11px;
  font-weight: 800;
}

.serviceOrdersKanbanFooter {
  justify-content: space-between;
  padding-top: 4px;
}

.serviceOrdersKanbanEmpty {
  padding: 18px 10px;
  text-align: center;
  color: #6c829d;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1040px) {
  .serviceOrdersKanban {
    grid-template-columns: 1fr;
  }
  .serviceOrdersKanbanCards {
    max-height: none;
  }
}


.opportunityFilterBtn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.opportunityFilterBtn[hidden] {
  display: none !important;
}

.opportunityFilterBtn.hasOpportunities {
  border-color: #f6b73c;
  background: #fff7df;
  color: #8a4b00;
}

.opportunityFilterBtn.active {
  border-color: #f28a2e;
  background: #ffedd5;
  color: #7c2d12;
  box-shadow: 0 10px 24px rgba(242, 138, 46, .16);
}

.opportunityFilterBtn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f28a2e;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.opportunityBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 5px;
  border: 1px solid #f6b73c;
  border-radius: 999px;
  background: #fff7df;
  color: #8a4b00;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

/* Modern Pinterest-inspired shell */
@media (min-width: 900px) {
  :root {
    --modern-rail: 68px;
    --modern-top-gap: 14px;
  }

  body {
    background: #f7f8fb;
  }

  .modernAppRail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 10000;
    width: var(--modern-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px 10px 14px;
    background: rgba(255, 255, 255, 0.94);
    border-right: 1px solid rgba(14, 38, 70, 0.10);
    box-shadow: 10px 0 30px rgba(20, 55, 100, 0.04);
    backdrop-filter: blur(18px);
  }

  .modernRailTop {
    display: grid;
    gap: 14px;
    justify-items: center;
  }

  .modernRailLogo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 22px rgba(17, 68, 130, 0.10);
  }

  .modernRailLogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .modernRailBtn {
    position: relative;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #0e2238;
    cursor: pointer;
  }

  .modernRailBtn img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    opacity: 0.88;
  }

  .modernRailBtn span {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 7px 10px;
    border-radius: 10px;
    background: #101828;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.18);
  }

  .modernRailBtn:hover,
  .modernRailBtn:focus-visible,
  body:not(.appModeOrders):not(.appModeClients) #btnModernConversations,
  body.appModeOrders #btnModernOrders {
    background: #eef5ff;
    box-shadow: inset 0 0 0 2px rgba(29, 120, 255, 0.28);
  }

  .modernRailBtn:hover span,
  .modernRailBtn:focus-visible span {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .siteHeader {
    display: none;
  }

  .boardTop {
    display: none !important;
  }

  .desktopFiltersBar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 14px 8px calc(var(--modern-rail) + 14px);
    background: rgba(247, 248, 251, 0.82);
    backdrop-filter: blur(16px);
  }

  .desktopFiltersBar .wrap {
    width: 100%;
    padding: 0;
  }

  .filtersShell.inboxToolbar {
    min-height: 58px;
    padding: 0;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .inboxToolbar .filterInlineSearch {
    order: 1;
    flex: 1 1 520px;
    min-width: 260px;
    max-width: none;
  }

  .inboxToolbar .filterInlineSearch .filterInlineText {
    display: none;
  }

  .inboxToolbar .filterInlineSearch .searchFilterControl::before {
    content: none !important;
    position: absolute;
    left: 17px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: #687083;
    mask: url('/icons/modern/search-alt.svg') center / contain no-repeat;
    -webkit-mask: url('/icons/modern/search-alt.svg') center / contain no-repeat;
    z-index: 1;
    pointer-events: none;
  }

  .inboxToolbar .filterInlineSearch input {
    height: 48px;
    border: 0;
    border-radius: 16px;
    padding-left: 48px;
    padding-right: 104px;
    background: #eef0eb;
    color: #172033;
    box-shadow: none;
    font-size: 15px;
  }

  .inboxToolbar .filterInlineSearch input:focus {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(29, 120, 255, 0.12), 0 12px 28px rgba(20, 55, 100, 0.08);
  }

  .viewTabs {
    order: 2;
    flex: 0 1 auto;
    max-width: min(720px, 46vw);
    gap: 6px;
  }

  .viewTab {
    height: 40px;
    border-radius: 14px;
    padding: 0 12px;
    color: #172033;
  }

  .viewTab.active {
    color: #075eb9;
    background: #e8f2ff;
  }

  .whatsappQuickTab select {
    max-width: 210px;
  }

  .filterActionBtn {
    order: 3;
    height: 40px;
    border-radius: 14px;
  }

  #btnAdvancedFilters,
  #btnServiceOrdersView {
    display: none;
  }

  .opportunityFilterBtn {
    white-space: nowrap;
  }

  .serviceOrdersLayoutBtn {
    white-space: nowrap;
  }

  .modernAccountMenu {
    order: 10;
    position: relative;
    flex: 0 0 auto;
    margin-left: 2px;
  }

  .modernAccountMenu summary {
    list-style: none;
    height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0 4px 0 8px;
    border-radius: 999px;
  }

  .modernAccountMenu summary::-webkit-details-marker {
    display: none;
  }

  .modernAccountAvatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, #08274a, #1479e8);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(12, 84, 170, 0.18);
  }

  .modernAccountChevron {
    color: #667085;
    font-weight: 900;
  }

  .modernAccountDropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 220px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(14, 38, 70, 0.10);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
    z-index: 70;
  }

  .modernAccountDropdown button {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #172033;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
  }

  .modernAccountDropdown button:hover {
    background: #f2f6fb;
  }

  .modernAccountDropdown .danger {
    color: #b42318;
  }

  .modernAccountDropdown img {
    width: 16px;
    height: 16px;
  }

  .board,
  .serviceOrdersBoardView,
  .clientsBoardView {
    width: calc(100vw - var(--modern-rail) - 28px);
    margin-left: calc(var(--modern-rail) + 14px);
    margin-right: 14px;
  }

  .board {
    padding-top: 8px;
  }

  .err {
    top: 76px;
    left: var(--modern-rail);
  }

  .desktopSidepanelPanel {
    right: auto;
    left: var(--modern-rail);
    width: min(386px, calc(100vw - var(--modern-rail) - 24px));
    border-left: 0;
    border-right: 1px solid var(--border);
    box-shadow: 18px 0 44px rgba(19, 67, 127, 0.14);
    transform: translateX(-105%);
  }

  .desktopSidepanel.open .desktopSidepanelPanel {
    transform: translateX(0);
  }

  .desktopSidepanelHeader strong::after {
    content: none !important;
  }
}

@media (max-width: 899px) {
  .modernAppRail,
  .modernAccountMenu {
    display: none !important;
  }
}

/* Modern shell overlap fixes */
@media (min-width: 900px) {
  .modernAppRail {
    z-index: 12050;
  }

  .modernAppRail + .siteHeader,
  .mobileDrawer,
  .mobileDrawer.open,
  .mobileDrawerBackdrop,
  .mobileDrawerBackdrop.open,
  .mobileFilterDrawer,
  .mobileFilterDrawer.open,
  .mobileFilterBackdrop,
  .mobileFilterBackdrop.open {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .chatDrawerBackdrop.open,
  .contactProfileBackdrop.open {
    left: var(--modern-rail);
  }

  .desktopSidepanel {
    z-index: 12060;
  }

  .desktopSidepanelBackdrop {
    left: var(--modern-rail);
  }

  .desktopSidepanelHeader strong::after {
    content: none !important;
  }
}

/* Fully hide modern left sidepanel when closed */
@media (min-width: 900px) {
  .desktopSidepanel:not(.open) .desktopSidepanelPanel {
    transform: translateX(calc(-100% - var(--modern-rail) - 32px)) !important;
  }

  .desktopSidepanel.open .desktopSidepanelPanel {
    transform: translateX(0) !important;
  }
}

/* Modern shell cache-fix cleanup */
@media (min-width: 900px) {
  .desktopSidepanelHeader strong::after {
    content: none !important;
  }

  #mobileFilterDrawer,
  #mobileDrawer {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Modern shell final left-ghost fix */
@media (min-width: 900px) {
  .desktopSidepanel:not(.open) {
    pointer-events: none !important;
  }

  .desktopSidepanel:not(.open) .desktopSidepanelPanel {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-120vw) !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .desktopSidepanel.open .desktopSidepanelPanel {
    left: var(--modern-rail) !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .desktopSidepanelHeader strong::after,
  .inboxToolbar .filterInlineSearch .searchFilterControl::before {
    content: none !important;
  }
}

/* Modern shell search balance */
@media (min-width: 900px) {
  .inboxToolbar .filterInlineSearch {
    flex: 0 1 clamp(320px, 36vw, 560px) !important;
    min-width: 300px !important;
    max-width: 560px !important;
  }

  .inboxToolbar .filterInlineSearch .searchFilterControl::before {
    content: none !important;
    display: none !important;
  }

  .inboxToolbar .filterInlineSearch input {
    background-color: #eef0eb !important;
    background-image: url('/icons/modern/search.svg') !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 18px 18px !important;
    padding-left: 50px !important;
  }

  .inboxToolbar .filterInlineSearch input:focus {
    background-color: #fff !important;
  }

  .viewTabs {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 4px !important;
  }

  .viewTab {
    height: 38px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  .viewTab span:not(.viewTabText) {
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .whatsappQuickTab {
    padding-right: 5px !important;
  }

  .whatsappQuickTab .viewTabText {
    font-size: 0 !important;
  }

  .whatsappQuickTab .viewTabText::after {
    content: 'WA:';
    font-size: 13px;
  }

  .whatsappQuickTab select {
    max-width: 150px !important;
    min-width: 106px !important;
    font-size: 12px !important;
    padding-left: 4px !important;
    padding-right: 18px !important;
  }

  .opportunityFilterBtn {
    max-width: 190px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (min-width: 900px) and (max-width: 1320px) {
  .inboxToolbar .filterInlineSearch {
    flex-basis: 360px !important;
    max-width: 420px !important;
  }

  .viewTab {
    padding: 0 7px !important;
    font-size: 12px !important;
  }

  .viewTab[data-view-filter='instagram'] {
    max-width: 92px;
    overflow: hidden;
  }
}


/* Modern shell search balance final */
@media (min-width: 900px) {
  .inboxToolbar {
    gap: 10px !important;
  }

  .inboxToolbar .filterInlineSearch {
    flex: 0 1 clamp(300px, 34vw, 520px) !important;
    min-width: 280px !important;
    max-width: 520px !important;
  }

  .inboxToolbar .filterInlineSearch input {
    background-color: #eef0eb !important;
    background-image: url('/icons/modern/search.svg') !important;
    background-repeat: no-repeat !important;
    background-position: 18px center !important;
    background-size: 18px 18px !important;
    padding-left: 50px !important;
  }

  .viewTabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 4px !important;
    justify-content: flex-start !important;
  }

  .viewTab {
    height: 38px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  .viewTab span:not(.viewTabText) {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .whatsappQuickTab {
    padding-right: 5px !important;
  }

  .whatsappQuickTab .viewTabText {
    font-size: 13px !important;
  }

  .whatsappQuickTab .viewTabText::after {
    content: none !important;
  }

  .whatsappQuickTab select,
  .whatsappQuickTab .channelSelector,
  .whatsappQuickTab .quickChannelSelect {
    min-width: 104px !important;
    max-width: 145px !important;
    font-size: 12px !important;
    padding-left: 6px !important;
    padding-right: 20px !important;
  }

  .opportunityFilterBtn {
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 1320px) and (min-width: 900px) {
  .inboxToolbar .filterInlineSearch {
    flex-basis: 360px !important;
    max-width: 400px !important;
  }

  .viewTab {
    padding: 0 7px !important;
    font-size: 12px !important;
  }

  .whatsappQuickTab .viewTabText {
    font-size: 12px !important;
  }

  .whatsappQuickTab select,
  .whatsappQuickTab .channelSelector,
  .whatsappQuickTab .quickChannelSelect {
    max-width: 126px !important;
  }
}


/* Modern menu/icon polish */
@media (min-width: 900px) {
  .desktopSidepanel {
    z-index: 1400 !important;
  }

  .desktopSidepanelBackdrop {
    z-index: 1401 !important;
  }

  .desktopSidepanelPanel {
    z-index: 1402 !important;
    left: 84px !important;
    width: min(390px, calc(100vw - 104px)) !important;
  }

  .mobileFilterDrawer {
    z-index: 1500 !important;
  }

  .mobileFilterDrawerBackdrop {
    z-index: 1501 !important;
  }

  .mobileFilterDrawerPanel {
    z-index: 1502 !important;
    left: 84px !important;
    width: min(620px, calc(100vw - 104px)) !important;
  }

  .sideItem {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .sideItem img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex: 0 0 20px !important;
  }

  .sideItem span {
    min-width: 0 !important;
  }

  .serviceOrdersLayoutBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    line-height: 1 !important;
    padding: 0 14px !important;
  }

  .serviceOrdersLayoutBtn img,
  .serviceOrdersLayoutIcon {
    width: 17px !important;
    height: 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 17px !important;
  }
}


/* Modern rail filter drawer desktop fix */
@media (min-width: 900px) {
  #mobileFilterDrawer,
  #mobileFilterDrawer.open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 1500 !important;
  }

  #mobileFilterDrawer.open {
    pointer-events: auto !important;
  }

  #mobileFilterDrawer .mobileDrawerBackdrop {
    z-index: 1501 !important;
  }

  #mobileFilterDrawer .mobileDrawerPanel {
    z-index: 1502 !important;
    left: 84px !important;
    width: min(620px, calc(100vw - 104px)) !important;
    max-width: min(620px, calc(100vw - 104px)) !important;
    transform: translateX(-120vw) !important;
  }

  #mobileFilterDrawer.open .mobileDrawerPanel {
    transform: translateX(0) !important;
  }

  .desktopSidepanel {
    z-index: 1400 !important;
  }

  .desktopSidepanelBackdrop {
    z-index: 1401 !important;
  }

  .desktopSidepanelPanel {
    z-index: 1402 !important;
  }
}


/* Modern rail SLA drawer offset */
@media (min-width: 900px) {
  .operationsSummaryOverlay {
    z-index: 1300 !important;
    padding-left: 84px !important;
  }

  .operationsSummaryCard {
    width: min(620px, calc(100vw - 104px)) !important;
    max-width: min(620px, calc(100vw - 104px)) !important;
    border-radius: 0 24px 24px 0 !important;
  }
}


/* Filter/Kanban visibility fix 20260716-filter-kanban-fix */
#btnServiceOrdersLayoutToggle[hidden],
.serviceOrdersLayoutBtn[hidden] {
  display: none !important;
}

body:not(.appModeOrders) #btnServiceOrdersLayoutToggle {
  display: none !important;
}

body.appModeOrders #btnServiceOrdersLayoutToggle:not([hidden]) {
  display: inline-flex !important;
}


/* Filter drawer visible-position fix 20260716-filter-position-fix */
@media (min-width: 900px) {
  #mobileFilterDrawer {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1600 !important;
    pointer-events: none !important;
  }

  #mobileFilterDrawer.open {
    pointer-events: auto !important;
  }

  #mobileFilterDrawer .mobileDrawerBackdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1601 !important;
  }

  #mobileFilterDrawer .mobileDrawerPanel {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 84px !important;
    right: auto !important;
    width: min(620px, calc(100vw - 104px)) !important;
    max-width: min(620px, calc(100vw - 104px)) !important;
    height: 100dvh !important;
    z-index: 1602 !important;
    transform: translateX(-105%) !important;
    transition: transform 180ms ease !important;
    border-radius: 0 24px 24px 0 !important;
  }

  #mobileFilterDrawer.open .mobileDrawerPanel {
    transform: translateX(0) !important;
  }
}


/* Expanded icon rail 20260716-expanded-rail */
@media (min-width: 900px) {
  .modernAppRail {
    padding: 14px 8px 12px !important;
  }

  .modernRailTop {
    width: 100% !important;
    max-height: calc(100dvh - 86px) !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    gap: 8px !important;
    padding: 0 0 4px !important;
    scrollbar-width: none !important;
  }

  .modernRailTop::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .modernRailDivider {
    width: 28px !important;
    height: 1px !important;
    margin: 2px 0 !important;
    background: rgba(14, 38, 70, 0.14) !important;
  }

  .modernRailBtn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    flex: 0 0 42px !important;
  }

  .modernRailBtn img {
    width: 20px !important;
    height: 20px !important;
  }

  .modernRailSettings {
    flex: 0 0 42px !important;
    margin-top: 8px !important;
  }

  #mobileFilterDrawer.open .mobileDrawerPanel {
    left: 84px !important;
    right: auto !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* Kanban/list toggle alignment 20260716-kanban-align */
@media (min-width: 900px) {
  .filtersShell.inboxToolbar {
    align-items: center !important;
  }

  #btnServiceOrdersLayoutToggle.serviceOrdersLayoutBtn {
    order: 3 !important;
    align-self: center !important;
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    min-width: 112px !important;
    padding: 0 14px !important;
    margin: 0 8px 0 auto !important;
    border-radius: 14px !important;
    line-height: 1 !important;
    gap: 8px !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    vertical-align: middle !important;
  }

  #btnServiceOrdersLayoutToggle.serviceOrdersLayoutBtn img,
  #btnServiceOrdersLayoutToggle .serviceOrdersLayoutIcon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  #btnServiceOrdersLayoutToggle.serviceOrdersLayoutBtn span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #btnServiceOrdersLayoutToggle[hidden],
  body:not(.appModeOrders) #btnServiceOrdersLayoutToggle {
    display: none !important;
  }

  body.appModeOrders #btnServiceOrdersLayoutToggle:not([hidden]) {
    display: inline-flex !important;
  }
}


/* Menu/avatar/kanban polish 20260716-menu-avatar-kanban */
@media (min-width: 900px) {
  #mobileFilterDrawer .mobileDrawerPanel,
  #mobileFilterDrawer.open .mobileDrawerPanel,
  .desktopSidepanelPanel,
  .desktopSidepanel.open .desktopSidepanelPanel,
  .operationsSummaryOverlay {
    left: var(--modern-rail, 68px) !important;
  }

  #mobileFilterDrawer .mobileDrawerPanel,
  #mobileFilterDrawer.open .mobileDrawerPanel {
    width: min(620px, calc(100vw - var(--modern-rail, 68px))) !important;
    max-width: min(620px, calc(100vw - var(--modern-rail, 68px))) !important;
  }

  .desktopSidepanelPanel,
  .desktopSidepanel.open .desktopSidepanelPanel {
    width: min(386px, calc(100vw - var(--modern-rail, 68px))) !important;
    max-width: min(386px, calc(100vw - var(--modern-rail, 68px))) !important;
  }

  .operationsSummaryOverlay {
    padding-left: var(--modern-rail, 68px) !important;
  }

  #desktopSidepanel .sideGroup:has(#btnHelpDesktopPanel),
  #desktopSidepanel .sideGroup:has(#btnClientsDesktopPanel),
  #desktopSidepanel .sideGroup:has(#btnServiceOrdersDesktopPanel),
  #desktopSidepanel .sideGroup .sideItem#btnSwitchTenantDesktopPanel,
  #desktopSidepanel .sideGroup .sideItem#btnAccountDesktopPanel,
  #desktopSidepanel .sideGroup .sideItem#btnManageBillingDesktopPanel,
  #desktopSidepanel .sideGroup .sideItem#btnLogoutDesktopPanel {
    display: none !important;
  }

  #desktopSidepanel .sideGroup:has(#btnFiscalProfileDesktopPanel) .sideGroupTitle {
    font-size: 0 !important;
  }

  #desktopSidepanel .sideGroup:has(#btnFiscalProfileDesktopPanel) .sideGroupTitle::after {
    content: 'Avançado';
    font-size: 11px;
  }

  .modernAccountDropdown {
    width: 224px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    font-family: inherit !important;
    z-index: 12000 !important;
  }

  .modernAccountDropdown button {
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    gap: 10px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    color: #172033 !important;
  }

  .modernAccountDropdown button img {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    object-fit: contain !important;
  }

  .modernAccountDropdown button span {
    line-height: 1 !important;
  }

  .modernAccountDropdown button.danger {
    color: #b42318 !important;
  }

  #btnServiceOrdersLayoutToggle.serviceOrdersLayoutBtn {
    min-width: 126px !important;
  }
}


/* Fast black rail tooltips 20260716-rail-tooltip */
@media (min-width: 900px) {
  .modernRailBtn span {
    left: calc(100% + 10px) !important;
    top: 50% !important;
    transform: translateY(-50%) translateX(-2px) !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    background: #101828 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 80ms ease, transform 80ms ease, visibility 0ms linear 80ms !important;
    transition-delay: 0ms !important;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.22) !important;
    z-index: 20000 !important;
  }

  .modernRailBtn:hover span,
  .modernRailBtn:focus-visible span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
    transition: opacity 80ms ease, transform 80ms ease, visibility 0ms !important;
    transition-delay: 0ms !important;
  }
}


/* Outside close/gap cleanup 20260716-avatar-outside-gap */
@media (min-width: 900px) {
  .operationsSummaryOverlay {
    left: 0 !important;
    padding-left: var(--modern-rail, 68px) !important;
  }

  .operationsSummaryCard {
    margin-left: 0 !important;
  }

  #mobileFilterDrawer:not(.open),
  .desktopSidepanel:not(.open) {
    pointer-events: none !important;
  }

  #mobileFilterDrawer:not(.open) .mobileDrawerPanel {
    left: var(--modern-rail, 68px) !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .desktopSidepanel:not(.open) .desktopSidepanelPanel {
    left: var(--modern-rail, 68px) !important;
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .desktopSidepanel.open .desktopSidepanelPanel,
  #mobileFilterDrawer.open .mobileDrawerPanel {
    left: var(--modern-rail, 68px) !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #desktopSidepanel .sideGroup:has(#btnFiscalProfileDesktopPanel) {
    display: none !important;
  }
}


/* Remove empty menu and instant black rail tooltips 20260716-remove-menu-fast-tooltips */
@media (min-width: 900px) {
  #btnModernMenu,
  .modernRailSettings {
    display: none !important;
  }

  .modernAppRail {
    overflow: visible !important;
  }

  .modernRailTop {
    overflow-x: visible !important;
  }

  .modernRailBtn span {
    left: calc(100% + 9px) !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.98) !important;
    transform-origin: left center !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    background: #111827 !important;
    color: #fff !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 35ms linear, transform 35ms linear, visibility 0ms linear 35ms !important;
    transition-delay: 0ms !important;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.24) !important;
    z-index: 25000 !important;
  }

  .modernRailBtn:hover span,
  .modernRailBtn:focus-visible span {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) scale(1) !important;
    transition: opacity 35ms linear, transform 35ms linear, visibility 0ms !important;
    transition-delay: 0ms !important;
  }
}


/* Fixed rail tooltip + toggle polish 20260716-tooltip-toggle */
@media (min-width: 900px) {
  .modernRailBtn > span {
    display: none !important;
  }
}

#modernRailTooltip {
  position: fixed !important;
  z-index: 30000 !important;
  transform: translateY(-50%) scale(0.98) !important;
  transform-origin: left center !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  background: #111827 !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 35ms linear, transform 35ms linear, visibility 0ms linear 35ms !important;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.24) !important;
}

#modernRailTooltip.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) scale(1) !important;
  transition: opacity 35ms linear, transform 35ms linear, visibility 0ms !important;
}


/* Restore WhatsApp quick selector label 20260716-whatsapp-label */
@media (min-width: 900px) {
  .whatsappQuickTab {
    min-width: 238px !important;
    max-width: 320px !important;
    padding-left: 10px !important;
    padding-right: 8px !important;
    gap: 7px !important;
  }

  .whatsappQuickTab .viewTabText {
    font-size: 13px !important;
    font-weight: 900 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
  }

  .whatsappQuickTab .viewTabText::after {
    content: none !important;
  }

  .whatsappQuickTab select,
  .whatsappQuickTab .channelSelector,
  .whatsappQuickTab .quickChannelSelect,
  #whatsappQuickChannelFilter {
    min-width: 158px !important;
    max-width: 205px !important;
    width: auto !important;
    flex: 1 1 158px !important;
    font-size: 12px !important;
    text-overflow: clip !important;
  }
}


/* OS tabs and content alignment 20260716-os-align-tabs */
@media (min-width: 900px) {
  body.appModeOrders .filtersShell.inboxToolbar {
    align-items: center !important;
    gap: 10px !important;
  }

  body.appModeOrders .viewTabs {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-right: auto !important;
  }

  body.appModeOrders .viewTab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 10px !important;
  }

  body.appModeOrders .inboxToolbar .filterInlineSearch {
    flex: 0 0 min(520px, 28vw) !important;
    max-width: 520px !important;
  }

  body.appModeOrders .serviceOrdersBoardView {
    width: calc(100vw - var(--modern-rail, 68px) - 28px) !important;
    margin-left: calc(var(--modern-rail, 68px) + 14px) !important;
    margin-right: 14px !important;
    padding: 12px 0 22px !important;
    box-sizing: border-box !important;
  }

  body.appModeOrders .serviceOrdersBoardList {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.appModeOrders .serviceOrdersClientCard,
  body.appModeOrders .serviceOrdersKanbanColumn {
    margin-left: 0 !important;
  }

  body.appModeOrders .serviceOrdersKanban {
    margin: 0 !important;
  }
}


/* Rail account + toolbar SLA 20260716-rail-account-toolbar-sla */
@media (min-width: 900px) {
  .modernRailAccountMenu {
    position: relative !important;
    flex: 0 0 auto !important;
    margin: 10px 0 0 !important;
    width: 42px !important;
  }

  .modernRailAccountMenu summary {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .modernRailAccountMenu summary::-webkit-details-marker {
    display: none !important;
  }

  .modernRailAccountBtn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 15px !important;
    display: grid !important;
    place-items: center !important;
  }

  .modernRailAccountBtn img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }

  .modernRailAccountMenu .modernAccountDropdown {
    position: fixed !important;
    left: calc(var(--modern-rail, 68px) + 10px) !important;
    right: auto !important;
    bottom: 14px !important;
    top: auto !important;
    width: 224px !important;
    z-index: 26000 !important;
  }

  .modernToolbarSla {
    order: 10 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(34, 96, 170, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: #153250 !important;
    box-shadow: 0 10px 26px rgba(20, 55, 100, 0.07) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font: inherit !important;
  }

  .modernToolbarSla > span {
    font-size: 12px !important;
    font-weight: 950 !important;
    color: #075cab !important;
  }

  .modernToolbarSla b {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    color: #607796 !important;
  }

  .modernToolbarSla em {
    font-style: normal !important;
    font-weight: 950 !important;
    color: #102943 !important;
  }

  .modernToolbarSla:hover,
  .modernToolbarSla:focus-visible {
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(29, 120, 255, 0.10), 0 12px 28px rgba(20, 55, 100, 0.09) !important;
    outline: none !important;
  }

  body.appModeOrders .modernToolbarSla {
    display: none !important;
  }
}

@media (max-width: 1280px) and (min-width: 900px) {
  .modernToolbarSla b:nth-of-type(2),
  .modernToolbarSla b:nth-of-type(4) {
    display: none !important;
  }
}


/* Compact search width 20260716-search-compact */
@media (min-width: 900px) {
  .inboxToolbar .filterInlineSearch {
    flex: 0 0 clamp(250px, 23vw, 360px) !important;
    min-width: 250px !important;
    max-width: 360px !important;
  }

  body.appModeOrders .inboxToolbar .filterInlineSearch {
    flex: 0 0 clamp(250px, 23vw, 360px) !important;
    min-width: 250px !important;
    max-width: 360px !important;
  }
}


/* Rail fixed zones + radar footer 20260716-rail-radar-bottom */
@media (min-width: 900px) {
  .modernAppRail {
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .modernRailTop {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .modernRailScroll {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 74px !important;
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding: 0 0 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(15, 42, 72, 0.26) transparent !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%) !important;
  }

  .modernRailScroll::-webkit-scrollbar {
    width: 4px !important;
  }

  .modernRailScroll::-webkit-scrollbar-thumb {
    background: rgba(15, 42, 72, 0.24) !important;
    border-radius: 999px !important;
  }

  .modernRailBottom {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(14, 38, 70, 0.12) !important;
  }

  .modernRailOpportunityBtn[hidden] {
    display: none !important;
  }

  .modernRailOpportunityBtn {
    background: #fff7df !important;
    border: 1px solid rgba(246, 183, 60, 0.72) !important;
    color: #8a4b00 !important;
    box-shadow: 0 10px 22px rgba(242, 138, 46, 0.13) !important;
  }

  .modernRailOpportunityBtn::before {
    content: "🔥" !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  .modernRailOpportunityBtn.active {
    background: #ffedd5 !important;
    border-color: #f28a2e !important;
    box-shadow: 0 0 0 4px rgba(242, 138, 46, 0.15), 0 14px 26px rgba(242, 138, 46, 0.18) !important;
  }

  .modernRailOpportunityBtn em {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f28a2e !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-size: 10px !important;
    font-style: normal !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  .modernRailAccountMenu {
    margin: 0 !important;
  }
}


.operationalWorkersSection {
  margin-top: 16px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  padding: 14px;
}

.operationalWorkersSection h3 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text-strong);
}

.operationalWorkerForm {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(110px, .8fr) minmax(100px, .7fr) auto;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}

.operationalWorkerForm input {
  min-height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 7px 10px;
  font: 700 12px/1.2 inherit;
  color: var(--text);
  background: rgba(248, 251, 255, 0.9);
}

.operationalWorkersList {
  display: grid;
  gap: 8px;
}

.operationalWorkerItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  padding: 10px 12px;
}

.operationalWorkerItem.inactive {
  opacity: .58;
}

.operationalWorkerItem b,
.operationalWorkerItem span {
  display: block;
}

.operationalWorkerItem b {
  font-size: 12px;
  color: var(--text-strong);
}

.operationalWorkerItem span {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

.serviceOrderOperationPicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

.serviceOrderOperationPicker span {
  white-space: nowrap;
}

.serviceOrderOperationSelect {
  min-height: 31px;
  max-width: 154px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--text-strong);
  padding: 5px 26px 5px 10px;
  font: 900 11px/1 inherit;
}

@media (max-width: 720px) {
  .operationalWorkerForm {
    grid-template-columns: 1fr;
  }
}

.serviceOrderExecutionMeta {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #0759b8;
  font-weight: 900;
}

.operationalWorkersSectionTop {
  margin-top: 0;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(239,246,255,.92), rgba(255,255,255,.94));
}

.operationalWorkersSectionTop::before {
  content: "QR de OS";
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0759b8;
  font-size: 11px;
  font-weight: 1000;
}

.operationalWorkerActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.operationalWorkerCode {
  display: inline-flex;
  width: fit-content;
  margin-top: 7px;
  padding: 5px 9px;
  border-radius: 10px;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #0759b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .08em;
}


/* Stable inbox header layout 20260716-sla-no-overlap */
@media (min-width: 900px) {
  .desktopFiltersBar .filtersShell.inboxToolbar {
    display: grid !important;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .desktopFiltersBar .inboxToolbar .filterInlineSearch {
    grid-column: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  .desktopFiltersBar .inboxToolbar .viewTabs {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding-right: 4px !important;
    scrollbar-width: none !important;
  }

  .desktopFiltersBar .inboxToolbar .viewTabs::-webkit-scrollbar {
    display: none !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    z-index: 1 !important;
    flex: none !important;
    margin-left: 0 !important;
    max-width: min(456px, 31vw) !important;
    overflow: hidden !important;
  }

  .desktopFiltersBar .inboxToolbar .filterActionBtn,
  .desktopFiltersBar .inboxToolbar .serviceOrdersViewBtn,
  .desktopFiltersBar .inboxToolbar .serviceOrdersLayoutBtn {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  .desktopFiltersBar .inboxToolbar .serviceOrdersLayoutBtn:not([hidden]) {
    display: inline-flex !important;
  }

  body.appModeOrders .desktopFiltersBar .filtersShell.inboxToolbar {
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr) auto !important;
  }

  body.appModeOrders .desktopFiltersBar .inboxToolbar .modernToolbarSla {
    display: none !important;
  }
}

@media (min-width: 900px) and (max-width: 1340px) {
  .desktopFiltersBar .filtersShell.inboxToolbar {
    grid-template-columns: minmax(220px, 310px) minmax(0, 1fr) auto !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla {
    max-width: 276px !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla b:nth-of-type(2),
  .desktopFiltersBar .inboxToolbar .modernToolbarSla b:nth-of-type(3) {
    display: none !important;
  }
}

@media (min-width: 900px) and (max-width: 1160px) {
  .desktopFiltersBar .filtersShell.inboxToolbar {
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) auto !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla {
    max-width: 174px !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla b:not(:first-of-type) {
    display: none !important;
  }
}


/* Contextual OS filter chip 20260716-os-context-kanban */
body.appModeOrders .serviceOrdersBoardHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 10px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(34,96,170,.14) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 12px 28px rgba(20,55,100,.06) !important;
}

body.appModeOrders .serviceOrdersBoardFilters {
  display: none !important;
}


/* Revert OS contextual header card 20260716-os-search-filter */
body.appModeOrders .serviceOrdersBoardHeader,
body.appModeOrders .serviceOrdersBoardFilters {
  display: none !important;
}

/* Instagram coming soon 20260716 */
.is-coming-soon {
  cursor: not-allowed !important;
  opacity: .58 !important;
}
.viewTab.is-coming-soon {
  pointer-events: auto !important;
}
.viewTab.is-coming-soon small,
.modernRailBtn.is-coming-soon small {
  font-size: 10px;
  font-weight: 900;
  margin-left: 4px;
  opacity: .8;
}

/* Hover-expanded app rail 20260720-rail-hover-expand */
@media (min-width: 900px) {
  :root {
    --modern-rail-expanded: 252px;
  }

  #modernRailTooltip {
    display: none !important;
  }

  .modernAppRail {
    width: var(--modern-rail, 68px) !important;
    align-items: stretch !important;
    padding: 14px 8px 12px !important;
    transition: width 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
    overflow: hidden !important;
  }

  .modernAppRail:hover,
  .modernAppRail:focus-within {
    width: var(--modern-rail-expanded) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 18px 0 42px rgba(15, 35, 65, 0.14) !important;
  }

  .modernRailTop,
  .modernRailScroll,
  .modernRailBottom {
    justify-items: stretch !important;
  }

  .modernRailLogo {
    width: 42px !important;
    height: 42px !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 11px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    transition: width 140ms ease, padding 140ms ease !important;
  }

  .modernRailLogo img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 16px !important;
  }

  .modernRailLogo strong {
    min-width: 0 !important;
    color: #102943 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: opacity 100ms ease, transform 100ms ease !important;
    pointer-events: none !important;
  }

  .modernAppRail:hover .modernRailLogo,
  .modernAppRail:focus-within .modernRailLogo {
    width: 100% !important;
    padding: 0 10px 0 0 !important;
  }

  .modernAppRail:hover .modernRailLogo strong,
  .modernAppRail:focus-within .modernRailLogo strong {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .modernRailBtn,
  .modernRailAccountBtn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transition: width 140ms ease, padding 140ms ease, background 120ms ease, box-shadow 120ms ease !important;
  }

  .modernAppRail:hover .modernRailBtn,
  .modernAppRail:focus-within .modernRailBtn,
  .modernAppRail:hover .modernRailAccountBtn,
  .modernAppRail:focus-within .modernRailAccountBtn {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }

  .modernRailBtn > img,
  .modernRailAccountBtn > img {
    flex: 0 0 20px !important;
  }

  .modernRailBtn > span,
  .modernRailAccountBtn > span {
    position: static !important;
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #102943 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-4px) !important;
    overflow: hidden !important;
    transition: opacity 100ms ease, transform 100ms ease, max-width 140ms ease, visibility 0ms linear 100ms !important;
  }

  .modernAppRail:hover .modernRailBtn > span,
  .modernAppRail:focus-within .modernRailBtn > span,
  .modernAppRail:hover .modernRailAccountBtn > span,
  .modernAppRail:focus-within .modernRailAccountBtn > span {
    max-width: 180px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    transition: opacity 100ms ease, transform 100ms ease, max-width 140ms ease, visibility 0ms !important;
  }

  .modernRailOpportunityBtn {
    justify-content: center !important;
  }

  .modernAppRail:hover .modernRailOpportunityBtn,
  .modernAppRail:focus-within .modernRailOpportunityBtn {
    justify-content: flex-start !important;
  }

  .modernRailOpportunityBtn::before {
    flex: 0 0 20px !important;
    text-align: center !important;
  }

  .modernRailDivider {
    justify-self: center !important;
    transition: width 140ms ease !important;
  }

  .modernAppRail:hover .modernRailDivider,
  .modernAppRail:focus-within .modernRailDivider {
    width: calc(100% - 24px) !important;
  }

  .modernRailAccountMenu {
    width: 42px !important;
    align-self: center !important;
    transition: width 140ms ease !important;
  }

  .modernAppRail:hover .modernRailAccountMenu,
  .modernAppRail:focus-within .modernRailAccountMenu {
    width: 100% !important;
  }

  .modernAppRail:hover .modernRailAccountMenu .modernAccountDropdown,
  .modernAppRail:focus-within .modernRailAccountMenu .modernAccountDropdown {
    left: calc(var(--modern-rail-expanded) + 10px) !important;
  }
}

/* Account dropdown visibility after hover-expanded rail 20260720-account-click-fix */
@media (min-width: 900px) {
  .modernAppRail {
    overflow: visible !important;
  }

  .modernRailBottom,
  .modernRailAccountMenu,
  .modernRailAccountMenu summary {
    overflow: visible !important;
  }

  .modernRailAccountMenu summary {
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  .modernRailAccountMenu[open] .modernAccountDropdown {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .modernRailAccountMenu .modernAccountDropdown {
    left: calc(var(--modern-rail, 68px) + 10px) !important;
  }

  .modernAppRail:hover .modernRailAccountMenu .modernAccountDropdown,
  .modernAppRail:focus-within .modernRailAccountMenu .modernAccountDropdown,
  .modernRailAccountMenu[open] .modernAccountDropdown {
    left: calc(var(--modern-rail-expanded, 252px) + 10px) !important;
  }
}

/* Softer expanded rail typography 20260720-rail-weight-soften */
@media (min-width: 900px) {
  :root {
    --modern-rail-expanded: 286px;
  }

  .modernRailLogo strong {
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  .modernRailBtn > span,
  .modernRailAccountBtn > span {
    max-width: 0 !important;
    font-size: 12.5px !important;
    font-weight: 720 !important;
    letter-spacing: -0.01em !important;
    color: #14263b !important;
  }

  .modernAppRail:hover .modernRailBtn > span,
  .modernAppRail:focus-within .modernRailBtn > span,
  .modernAppRail:hover .modernRailAccountBtn > span,
  .modernAppRail:focus-within .modernRailAccountBtn > span {
    max-width: 226px !important;
  }

  .modernAppRail:hover .modernRailBtn,
  .modernAppRail:focus-within .modernRailBtn,
  .modernAppRail:hover .modernRailAccountBtn,
  .modernAppRail:focus-within .modernRailAccountBtn {
    gap: 10px !important;
    padding: 0 11px !important;
  }
}


/* Hide app shell during auth boot 20260911-login-boot */
body.authBooting:not(.isAuthenticated) .modernAppRail,
body.authBooting:not(.isAuthenticated) .siteHeader,
body.authBooting:not(.isAuthenticated) .boardTop,
body.authBooting:not(.isAuthenticated) .filtersShell,
body.authBooting:not(.isAuthenticated) .board,
body.authBooting:not(.isAuthenticated) .serviceOrdersBoardView,
body.authBooting:not(.isAuthenticated) .clientsBoardView,
body.authBooting:not(.isAuthenticated) #supportFab {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide authenticated rail until login is confirmed 20260720-hide-rail-logged-out */
@media (min-width: 900px) {
  body:not(.isAuthenticated) .modernAppRail {
    display: none !important;
  }

  body:not(.isAuthenticated) .board,
  body:not(.isAuthenticated) .serviceOrdersBoardView,
  body:not(.isAuthenticated) .clientsBoardView,
  body:not(.isAuthenticated) .filtersShell.inboxToolbar {
    margin-left: 14px !important;
    width: calc(100vw - 28px) !important;
  }
}


/* Account profile editable name 20260721-account-profile-name */
.accountProfileCard {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(147, 197, 253, 0.45);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(239, 248, 255, 0.92), rgba(255, 255, 255, 0.96));
}

.accountProfileCard h3 {
  margin: 0;
  color: #0f2742;
  font-size: 16px;
  font-weight: 800;
}

.accountProfileCard p {
  margin: 4px 0 12px;
  color: #5d7699;
  font-size: 13px;
  line-height: 1.35;
}

.accountProfileField {
  margin: 0;
}

.accountProfileActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.accountProfileActions input {
  min-width: 0;
}

@media (max-width: 640px) {
  .accountProfileActions {
    grid-template-columns: 1fr;
  }
}

.chatNewMessagesIndicator {
  position: absolute;
  right: 26px;
  bottom: 124px;
  z-index: 12;
  border: 1px solid rgba(27, 126, 228, .28);
  border-radius: 999px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #0b74de, #2388ff);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 14px 34px rgba(11, 116, 222, .28);
  cursor: pointer;
}
.chatNewMessagesIndicator[hidden] {
  display: none !important;
}
.chatNewMessagesIndicator:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(11, 116, 222, .34);
}


.instagramOAuthBox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(29, 127, 229, 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(29, 127, 229, 0.08), rgba(255, 255, 255, 0.94));
  color: var(--ink, #10233f);
}

.instagramOAuthBox strong {
  font-weight: 800;
}

.instagramOAuthBox span {
  color: var(--muted, #5d7598);
  font-size: 13px;
  line-height: 1.45;
}


.emailModalDialog {
  width: min(980px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
}

.emailModalBody {
  display: grid;
  gap: 14px;
  overflow: auto;
}

.emailIntroBox,
.emailAccountsPanel,
.emailBlockedPanel,
.emailFormCard {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.emailIntroBox {
  background: #f3f8ff;
}

.emailIntroBox span,
.emailAccountsHeader span,
.emailFormHeader span,
.emailProviderOption small,
.emailOAuthActions .hint {
  color: var(--muted);
  line-height: 1.35;
}

.emailAccountsHeader,
.emailFormHeader,
.emailFlagsRow,
.emailOAuthActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.emailAccountsList {
  display: grid;
  gap: 8px;
}

.emailBlockedPanel {
  background: #fff7ed;
}

.emailBlockedPanel .emailAccountsHeader b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 4px;
  border-radius: 999px;
  background: #ffedd5;
  color: #9a3412;
  font-size: 12px;
}

.emailBlockedSendersList {
  display: grid;
  gap: 8px;
}

.emailBlockedSenderItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  background: #fff;
}

.emailBlockedSenderItem span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.emailBlockedSenderItem small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatMessageMenuItem.dangerSoft {
  color: #b45309;
}


.emailAccountItem {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.emailAccountItem.active {
  border-color: #7ab8ff;
  background: #edf6ff;
}

.emailAccountMain,
.emailAccountMeta {
  display: grid;
  gap: 3px;
}

.emailAccountMain small,
.emailAccountMeta span {
  color: var(--muted);
}

.emailAccountMeta {
  text-align: right;
  font-size: 12px;
}

.emailAccountMeta .ok { color: #047857; }
.emailAccountMeta .bad { color: #b91c1c; }

.emailAccountEmpty {
  padding: 14px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
}

.emailProviderGrid,
.emailConfigGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.emailProviderOption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}

.emailProviderOption span,
.emailConfigGrid label,
.emailCheckboxField {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
}

.emailProviderOption input,
.emailFlagsRow input,
.emailCheckboxField input {
  accent-color: #0d7be8;
}

.emailConfigGrid input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}

.emailCheckboxField {
  align-content: center;
  grid-template-columns: auto 1fr;
  color: var(--ink);
}

.emailFlagsRow label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}

.emailSectionTitle {
  margin-top: 4px;
  color: var(--ink);
  font-weight: 900;
}

.emailOAuthActions[hidden],
.emailSectionTitle[hidden],
.emailConfigGrid[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .emailProviderGrid,
  .emailConfigGrid {
    grid-template-columns: 1fr;
  }
  .emailAccountItem {
    align-items: flex-start;
    flex-direction: column;
  }
  .emailAccountMeta {
    text-align: left;
  }
}


.emailBubbleContent {
  display: grid;
  gap: 7px;
}

.emailBubbleSubject {
  color: #5f789f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.emailBubbleFresh {
  color: var(--text);
  line-height: 1.38;
  white-space: normal;
}

.emailBubbleFresh p,
.emailQuotedBody p {
  margin: 0;
}

.emailBubbleFresh p + p {
  margin-top: 6px;
}

.emailQuotedBody p + p {
  margin-top: 5px;
}

.emailQuotedHistory {
  border: 1px solid rgba(95, 120, 159, 0.18);
  border-radius: 12px;
  background: rgba(237, 246, 255, 0.72);
  overflow: hidden;
}

.emailQuotedHistory summary {
  cursor: pointer;
  list-style: none;
  padding: 7px 10px;
  color: #075aa8;
  font-size: 12px;
  font-weight: 900;
}

.emailQuotedHistory summary::-webkit-details-marker {
  display: none;
}

.emailQuotedHistory summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.16s ease;
}

.emailQuotedHistory[open] summary::before {
  transform: rotate(90deg);
}

.emailQuotedBody {
  max-height: 220px;
  overflow: auto;
  padding: 0 11px 10px;
  color: #5f789f;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}

/* Unified quick channel selectors 20260728-email-select-polish */
@media (min-width: 900px) {
  .whatsappQuickTab,
  .emailQuickTab {
    min-width: 0 !important;
    padding-right: 8px !important;
    gap: 7px !important;
  }

  .emailQuickTab {
    padding-left: 10px !important;
  }

  .whatsappQuickTab .viewTabText,
  .emailQuickTab .viewTabText {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: inherit !important;
  }

  .whatsappQuickTab select,
  .emailQuickTab select {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-width: 132px !important;
    max-width: 205px !important;
    height: 28px !important;
    flex: 0 1 auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 26px 0 10px !important;
    background-color: rgba(255, 255, 255, 0.44) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%235f789f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 14px 14px !important;
    color: inherit !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .whatsappQuickTab.active select,
  .emailQuickTab.active select {
    background-color: rgba(255, 255, 255, 0.62) !important;
    color: #0969bd !important;
  }

  .whatsappQuickTab select:hover,
  .whatsappQuickTab select:focus,
  .emailQuickTab select:hover,
  .emailQuickTab select:focus {
    background-color: rgba(13, 99, 201, 0.10) !important;
    box-shadow: 0 0 0 2px rgba(13, 99, 201, 0.08) !important;
  }

  .emailQuickTab select {
    min-width: 145px !important;
    max-width: 210px !important;
  }
}


/* Responsive SLA drawer 20260728-sla-drawer */
@media (min-width: 900px) and (max-width: 1520px) {
  .desktopFiltersBar .inboxToolbar .modernToolbarSla {
    position: relative !important;
    justify-self: end !important;
    width: 78px !important;
    max-width: 78px !important;
    min-width: 78px !important;
    padding: 0 12px !important;
    gap: 6px !important;
    overflow: hidden !important;
    transition: width 160ms ease, max-width 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla::after {
    content: "‹";
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: rgba(13, 99, 201, 0.10) !important;
    color: #075cab !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    transition: transform 160ms ease !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla > span {
    flex: 0 0 auto !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla b {
    display: none !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla.isExpanded {
    width: min(440px, calc(100vw - var(--modern-rail, 68px) - 112px)) !important;
    max-width: min(440px, calc(100vw - var(--modern-rail, 68px) - 112px)) !important;
    min-width: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(29, 120, 255, 0.10), 0 14px 34px rgba(20, 55, 100, 0.14) !important;
    z-index: 25 !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla.isExpanded::after {
    transform: rotate(180deg) !important;
  }

  .desktopFiltersBar .inboxToolbar .modernToolbarSla.isExpanded b {
    display: inline-flex !important;
  }
}


/* Hide top SLA summary 20260728-hide-toolbar-sla */
.desktopFiltersBar .inboxToolbar .modernToolbarSla {
  display: none !important;
}

/* Protected authentication notice 20260729 */
.protectedAuthMessage {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(13, 99, 201, 0.18);
  border-radius: 12px;
  background: rgba(237, 246, 255, 0.9);
  color: #153250;
}
.protectedAuthMessage strong {
  font-size: 13px;
  color: #075cab;
}
.protectedAuthMessage span {
  font-size: 12px;
  line-height: 1.35;
  color: #607796;
}


.chatMessage.emailThreadMessage {
  justify-content: stretch;
  width: 100%;
}

.chatMessage.emailThreadMessage .chatBubble {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border-color: rgba(34, 96, 170, 0.14);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(17, 72, 145, 0.06);
}

.chatMessage.emailThreadMessage.mine .chatBubble {
  background: rgba(237, 246, 255, 0.86);
}

.chatMessage.emailThreadMessage .chatBubbleNameRow {
  margin-bottom: 4px;
}

.chatMessage.emailThreadMessage .chatBubbleName {
  font-size: 13px;
}

.chatMessage.emailThreadMessage .chatBubbleBody {
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.chatMessage.emailThreadMessage .chatBubbleTime {
  margin-top: 10px;
}

.chatMessage.emailThreadMessage .emailBubbleContent {
  gap: 9px;
}

.chatMessage.emailThreadMessage .emailBubbleSubject {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(34, 96, 170, 0.14);
  border-radius: 999px;
  background: rgba(237, 246, 255, 0.9);
  color: #075aa8;
}

.chatMessage.emailThreadMessage .emailBubbleFresh p,
.chatMessage.emailThreadMessage .emailQuotedBody p {
  margin: 0;
}

.chatMessage.emailThreadMessage .emailBubbleFresh p + p,
.chatMessage.emailThreadMessage .emailQuotedBody p + p {
  margin-top: 7px;
}


/* service-orders-kanban-professional-20260815 */
body.appModeOrders {
  background: #f7f8fa;
}

body.appModeOrders .desktopFiltersBar {
  background: rgba(247, 248, 250, .92);
  border-bottom-color: rgba(17, 24, 39, .08);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

body.appModeOrders .filterInlineSearch .filterInlineText {
  display: none !important;
}

body.appModeOrders .filterInlineSearch .searchFilterControl {
  min-height: 42px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

body.appModeOrders .filterInlineSearch input {
  height: 42px !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.appModeOrders .filterInlineSearch input::placeholder {
  color: #8a94a6 !important;
}

body.appModeOrders .viewTabs {
  gap: 10px !important;
}

body.appModeOrders .viewTab {
  height: 38px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #344054 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

body.appModeOrders .viewTab:hover {
  background: #f2f4f7 !important;
}

body.appModeOrders .viewTab.active {
  background: #e8f2ff !important;
  color: #075cab !important;
}

body.appModeOrders .viewTabs [data-os-count],
body.appModeOrders .viewTabs [data-view-count] {
  min-width: 20px !important;
  height: 20px !important;
  background: rgba(13, 99, 201, .12) !important;
  color: #075cab !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body.appModeOrders .serviceOrdersLayoutBtn {
  height: 42px !important;
  min-width: 124px !important;
  border: 1px solid #d6e2f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #075cab !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.appModeOrders .serviceOrdersBoardView {
  height: calc(100vh - 84px) !important;
  height: calc(100dvh - 84px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 10px 0 8px !important;
}

body.appModeOrders .serviceOrdersBoardList.kanbanMode {
  display: block !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.appModeOrders .serviceOrdersKanban {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

body.appModeOrders .serviceOrdersKanbanColumn {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 22px rgba(16, 24, 40, .04) !important;
  overflow: hidden !important;
}

body.appModeOrders .serviceOrdersKanbanColumn > header {
  position: relative !important;
  z-index: 2 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #fff7ed !important;
  box-shadow: none !important;
}

body.appModeOrders .serviceOrdersKanbanColumn-resolved > header {
  background: #f0fdf4 !important;
}

body.appModeOrders .serviceOrdersKanbanColumn-canceled > header {
  background: #fff1f2 !important;
}

body.appModeOrders .serviceOrdersKanbanColumn > header > div {
  position: relative !important;
  min-width: 0 !important;
  padding-left: 22px !important;
}

body.appModeOrders .serviceOrdersKanbanColumn > header > div::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 0 !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: #f59e0b !important;
  box-shadow: 0 0 0 5px rgba(245, 158, 11, .13) !important;
}

body.appModeOrders .serviceOrdersKanbanColumn-resolved > header > div::before {
  background: #12b76a !important;
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .13) !important;
}

body.appModeOrders .serviceOrdersKanbanColumn-canceled > header > div::before {
  background: #f04438 !important;
  box-shadow: 0 0 0 5px rgba(240, 68, 56, .13) !important;
}

body.appModeOrders .serviceOrdersKanbanColumn > header span {
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

body.appModeOrders .serviceOrdersKanbanColumn > header small {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.appModeOrders .serviceOrdersKanbanColumn > header b {
  min-width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(245, 158, 11, .28) !important;
  background: rgba(255, 250, 235, .82) !important;
  color: #b54708 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.appModeOrders .serviceOrdersKanbanColumn-resolved > header b {
  border-color: #abefc6 !important;
  background: #ecfdf3 !important;
  color: #027a48 !important;
}

body.appModeOrders .serviceOrdersKanbanColumn-canceled > header b {
  border-color: #fecdca !important;
  background: #fef3f2 !important;
  color: #b42318 !important;
}

body.appModeOrders .serviceOrdersKanbanCards {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: 12px !important;
  background: rgba(248, 250, 252, .58) !important;
  scrollbar-width: thin !important;
}

body.appModeOrders .serviceOrdersKanbanCard,
body.appModeOrders .serviceOrdersInlineItem,
body.appModeOrders .serviceOrderListItem {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 4px rgba(16, 24, 40, .03) !important;
}

body.appModeOrders .serviceOrdersKanbanCard {
  position: relative !important;
  gap: 8px !important;
  padding: 14px !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, opacity 140ms ease !important;
}

body.appModeOrders .serviceOrdersKanbanCard:hover,
body.appModeOrders .serviceOrdersKanbanCard:focus-visible,
body.appModeOrders .serviceOrdersInlineItem:hover,
body.appModeOrders .serviceOrderListItem:hover {
  border-color: #d0d5dd !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .05), 0 10px 24px rgba(16, 24, 40, .04) !important;
  outline: none !important;
}

body.appModeOrders .serviceOrdersKanbanCard.isDragSource {
  opacity: .55 !important;
  transform: scale(.985) !important;
}

body.appModeOrders .serviceOrdersKanbanColumn.isDragTarget {
  border-color: #84c5ff !important;
  box-shadow: 0 0 0 3px rgba(13, 99, 201, .12), 0 10px 28px rgba(16, 24, 40, .08) !important;
}

body.appModeOrders .serviceOrdersKanbanColumn.isStatusUpdating {
  cursor: progress !important;
}

body.appModeOrders .serviceOrdersKanbanTop,
body.appModeOrders .serviceOrdersKanbanFooter,
body.appModeOrders .serviceOrdersKanbanAudit,
body.appModeOrders .serviceOrdersInlineActions,
body.appModeOrders .serviceOrderListActions {
  gap: 8px !important;
}

body.appModeOrders .serviceOrdersKanbanFooter,
body.appModeOrders .serviceOrdersInlineActions,
body.appModeOrders .serviceOrderListActions {
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

body.appModeOrders .serviceOrdersKanbanTop strong,
body.appModeOrders .serviceOrdersInlineTop strong,
body.appModeOrders .serviceOrderListTitle strong {
  color: #075cab !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

body.appModeOrders .serviceOrdersKanbanCard h3 {
  color: #111827 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
}

body.appModeOrders .serviceOrdersKanbanCard p,
body.appModeOrders .serviceOrdersInlineMain p {
  color: #1f2937 !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  line-height: 1.35 !important;
}

body.appModeOrders .serviceOrdersKanbanAudit,
body.appModeOrders .serviceOrdersInlineMain small {
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
}

body.appModeOrders .serviceOrderStatus {
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

body.appModeOrders .serviceOrderStatus.open {
  border-color: #fedf89 !important;
  background: #fffaeb !important;
  color: #b54708 !important;
}

body.appModeOrders .serviceOrderStatus.resolved {
  border-color: #abefc6 !important;
  background: #ecfdf3 !important;
  color: #027a48 !important;
}

body.appModeOrders .serviceOrderStatus.canceled {
  border-color: #fecdca !important;
  background: #fef3f2 !important;
  color: #b42318 !important;
}

body.appModeOrders .serviceOrderTag,
body.appModeOrders .serviceOrderPriority {
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border-color: #e5e7eb !important;
  background: #f9fafb !important;
  color: #475467 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body.appModeOrders .serviceOrderPriority.critical,
body.appModeOrders .serviceOrderPriority.urgent {
  border-color: #fecdca !important;
  background: #fef3f2 !important;
  color: #b42318 !important;
}

body.appModeOrders .serviceOrderPriority.high {
  border-color: #fedf89 !important;
  background: #fffaeb !important;
  color: #b54708 !important;
}

body.appModeOrders .serviceOrderOperationPicker {
  display: inline-grid !important;
  grid-template-columns: auto minmax(118px, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  color: #667085 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body.appModeOrders .serviceOrderOperationPicker span {
  font-weight: 600 !important;
}

body.appModeOrders .serviceOrderOperationSelect {
  min-height: 30px !important;
  max-width: 152px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body.appModeOrders .serviceOrderIconBtn {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #d6e2f0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #075cab !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.appModeOrders .serviceOrderIconBtn:hover {
  border-color: #9fd0ff !important;
  background: #edf6ff !important;
}

body.appModeOrders .serviceOrderIconBtn img {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  filter: invert(28%) sepia(80%) saturate(1468%) hue-rotate(188deg) brightness(86%) contrast(97%) !important;
}

body.appModeOrders .serviceOrderStatusActions {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  border: 1px solid #d6e2f0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.appModeOrders .serviceOrderStatusActions .serviceOrderStatusBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-right: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #475467 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

body.appModeOrders .serviceOrderStatusActions .serviceOrderStatusBtn:last-child {
  border-right: 0 !important;
}

body.appModeOrders .serviceOrderStatusActions .serviceOrderStatusBtn:hover {
  background: #f2f4f7 !important;
  color: #075cab !important;
}

body.appModeOrders .serviceOrderStatusActions .serviceOrderStatusBtn.active,
body.appModeOrders .serviceOrderStatusActions .serviceOrderStatusBtn:disabled {
  background: #e8f2ff !important;
  color: #075cab !important;
  cursor: default !important;
  opacity: 1 !important;
}

body.appModeOrders .serviceOrdersKanbanEmpty {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  min-height: 320px !important;
  padding: 28px 18px !important;
  text-align: center !important;
  color: #667085 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.appModeOrders .serviceOrdersKanbanEmpty strong {
  margin-top: 10px !important;
  color: #344054 !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

body.appModeOrders .serviceOrdersKanbanEmpty span:last-child {
  max-width: 220px !important;
  line-height: 1.4 !important;
}

body.appModeOrders .serviceOrdersKanbanEmptyIcon {
  position: relative !important;
  width: 58px !important;
  height: 42px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #eef2f7, #dde5ef) !important;
  box-shadow: inset 0 -10px 18px rgba(148, 163, 184, .22) !important;
}

body.appModeOrders .serviceOrdersKanbanEmptyIcon::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: -8px !important;
  width: 30px !important;
  height: 14px !important;
  border-radius: 7px 7px 3px 3px !important;
  background: #e5ebf3 !important;
}

body.appModeOrders .serviceOrdersKanbanSkeleton {
  cursor: default !important;
}

body.appModeOrders .serviceOrdersKanbanSkeleton i {
  display: block !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 45%, #eef2f7 100%) !important;
  background-size: 220% 100% !important;
  animation: serviceOrdersSkeletonPulse 1.2s ease-in-out infinite !important;
}

body.appModeOrders .serviceOrdersKanbanSkeleton i:nth-child(1) { width: 42% !important; }
body.appModeOrders .serviceOrdersKanbanSkeleton i:nth-child(2) { width: 76% !important; height: 16px !important; }
body.appModeOrders .serviceOrdersKanbanSkeleton i:nth-child(3) { width: 64% !important; }
body.appModeOrders .serviceOrdersKanbanSkeleton i:nth-child(4) { width: 88% !important; }

@keyframes serviceOrdersSkeletonPulse {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (min-width: 900px) {
  body.appModeOrders .desktopFiltersBar .filtersShell.inboxToolbar {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) auto !important;
  }

  body.appModeOrders .inboxToolbar .filterInlineSearch {
    flex-basis: min(380px, 30vw) !important;
    max-width: 380px !important;
  }
}

@media (max-width: 1120px) {
  body.appModeOrders .serviceOrderOperationPicker {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 899px) {
  body.appModeOrders .serviceOrdersBoardView {
    width: 100% !important;
    height: calc(100vh - 118px) !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  body.appModeOrders .serviceOrdersKanban {
    grid-template-columns: 1fr !important;
  }

  body.appModeOrders .serviceOrdersKanbanColumn {
    height: 100% !important;
  }

  body.appModeOrders .serviceOrdersKanbanCards {
    padding: 10px !important;
  }

  body.appModeOrders .serviceOrdersKanbanFooter,
  body.appModeOrders .serviceOrdersInlineActions,
  body.appModeOrders .serviceOrderListActions {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}

/* Menu subgroups 20260911-menu-submenus */
@media (min-width: 900px) {
  #desktopSidepanel .sideMenuSubmenus {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #desktopSidepanel .sideMenuSubmenus .sideSubmenu {
    display: block !important;
  }
}

/* Main rail submenus 20260911-rail-submenus */
@media (min-width: 900px) {
  .modernRailSubmenu {
    width: 42px !important;
    align-self: center !important;
    display: block !important;
    transition: width 140ms ease !important;
  }

  .modernRailSubmenu summary {
    list-style: none !important;
  }

  .modernRailSubmenu summary::-webkit-details-marker {
    display: none !important;
  }

  .modernRailSubmenuSummary {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    color: #0e2646 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: width 140ms ease, padding 140ms ease, background 120ms ease !important;
  }

  .modernRailSubmenuSummary:hover,
  .modernRailSubmenuSummary:focus-visible {
    background: #edf5ff !important;
    border-color: #b9dafd !important;
    outline: none !important;
  }

  .modernRailSubmenuSummary > img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    flex: 0 0 20px !important;
  }

  .modernRailSubmenuSummary > span {
    min-width: 0 !important;
    max-width: 0 !important;
    color: #14263b !important;
    font-size: 12.5px !important;
    font-weight: 820 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-4px) !important;
    overflow: hidden !important;
    transition: opacity 100ms ease, transform 100ms ease, max-width 140ms ease, visibility 0ms linear 100ms !important;
  }

  .modernRailSubmenuItems {
    display: none !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 4px 0 4px 10px !important;
    margin-left: 20px !important;
    border-left: 1px solid rgba(14, 38, 70, 0.12) !important;
  }

  .modernRailSubmenuItems .modernRailBtn {
    height: 36px !important;
    border-radius: 12px !important;
  }

  .modernRailSubmenuItems .modernRailBtn > img {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  .modernAppRail:hover .modernRailSubmenu,
  .modernAppRail:focus-within .modernRailSubmenu {
    width: 100% !important;
  }

  .modernAppRail:hover .modernRailSubmenuSummary,
  .modernAppRail:focus-within .modernRailSubmenuSummary {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 11px !important;
  }

  .modernAppRail:hover .modernRailSubmenuSummary > span,
  .modernAppRail:focus-within .modernRailSubmenuSummary > span {
    max-width: 226px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    transition: opacity 100ms ease, transform 100ms ease, max-width 140ms ease, visibility 0ms !important;
  }

  .modernAppRail:hover .modernRailSubmenu[open] .modernRailSubmenuItems,
  .modernAppRail:focus-within .modernRailSubmenu[open] .modernRailSubmenuItems {
    display: flex !important;
  }
}

/* Main rail collapse after action 20260911-rail-collapse */
@media (min-width: 900px) {
  .modernAppRail.isActionCollapsed,
  .modernAppRail.isActionCollapsed:hover,
  .modernAppRail.isActionCollapsed:focus-within {
    width: var(--modern-rail, 68px) !important;
    overflow: hidden !important;
  }

  .modernAppRail.isActionCollapsed .modernRailLogo {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
  }

  .modernAppRail.isActionCollapsed .modernRailLogo strong,
  .modernAppRail.isActionCollapsed .modernRailBtn > span,
  .modernAppRail.isActionCollapsed .modernRailAccountBtn > span,
  .modernAppRail.isActionCollapsed .modernRailSubmenuSummary > span {
    max-width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-4px) !important;
  }

  .modernAppRail.isActionCollapsed .modernRailBtn,
  .modernAppRail.isActionCollapsed .modernRailAccountBtn,
  .modernAppRail.isActionCollapsed .modernRailSubmenuSummary {
    width: 42px !important;
    min-width: 42px !important;
    gap: 0 !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .modernAppRail.isActionCollapsed .modernRailSubmenu {
    width: 42px !important;
  }

  .modernAppRail.isActionCollapsed .modernRailSubmenuItems {
    display: none !important;
  }

  .modernAppRail.isActionCollapsed .modernRailDivider {
    width: 28px !important;
  }
}

/* Cinematic login 20260911-login-cinema */
#loginModal {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background:
    linear-gradient(135deg, rgba(5, 15, 31, 0.80), rgba(13, 99, 201, 0.28)),
    rgba(7, 18, 34, 0.68);
  backdrop-filter: blur(14px);
}

#loginModal .loginExperienceModal {
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.loginShowcase {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: clamp(28px, 4vw, 72px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 28px;
  background:
    linear-gradient(145deg, rgba(5, 18, 38, 0.98), rgba(7, 43, 86, 0.96) 52%, rgba(13, 99, 201, 0.90)),
    #07182f;
  color: #ffffff;
}

.loginShowcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 26%, rgba(255, 255, 255, 0.10) 34%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 96px);
  opacity: 0.62;
  animation: loginLightSweep 18s linear infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

.loginShowcaseTopline,
.loginShowcaseFooter,
.loginCinemaStage {
  position: relative;
  z-index: 1;
}

.loginShowcaseTopline {
  display: grid;
  gap: 8px;
}

.loginShowcaseTopline span {
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: #bfe2ff;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.loginShowcaseTopline b {
  max-width: 860px;
  color: #ffffff;
  font-size: 54px;
  line-height: 0.98;
  font-weight: 950;
}

.loginCinemaStage {
  min-height: 0;
  position: relative;
  border: 1px solid rgba(175, 213, 255, 0.20);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)),
    rgba(3, 17, 35, 0.50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 50px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.loginScene {
  position: absolute;
  inset: 0;
  padding: clamp(18px, 2.4vw, 30px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  animation: loginSceneCycle 28s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: opacity, transform;
}

.loginSceneOrders { animation-delay: 7s; }
.loginSceneProducts { animation-delay: 14s; }
.loginSceneChannels { animation-delay: 21s; }

.loginSceneHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #d8ecff;
  font-weight: 850;
}

.loginSceneHeader span {
  font-size: 13px;
}

.loginSceneHeader b {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.16);
  color: #99f6e4;
  font-size: 12px;
  white-space: nowrap;
}

.loginKanbanPreview {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.loginKanbanStageGrid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.34fr);
  gap: 14px;
  align-items: stretch;
}

.loginKanbanTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
  color: #123150;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.16);
}

.loginKanbanTopBar > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.loginKanbanTopBar strong {
  font-size: 13px;
  font-weight: 950;
}

.loginKanbanTopBar span {
  color: #6a84a5;
  font-size: 11px;
  font-weight: 800;
}

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

.loginKanbanStats span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  background: #edf6ff;
  color: #547193;
  white-space: nowrap;
}

.loginKanbanStats b {
  color: #0d63c9;
}

.loginKanbanBoard {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.loginKanbanColumn {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
}

.loginKanbanColumn[data-col="green"] .loginKanbanColumnHead { background: linear-gradient(180deg, rgba(39, 179, 106, 0.14), rgba(255, 255, 255, 0.78)); }
.loginKanbanColumn[data-col="yellow"] .loginKanbanColumnHead { background: linear-gradient(180deg, rgba(242, 184, 29, 0.16), rgba(255, 255, 255, 0.78)); }
.loginKanbanColumn[data-col="orange"] .loginKanbanColumnHead { background: linear-gradient(180deg, rgba(242, 138, 46, 0.16), rgba(255, 255, 255, 0.78)); }
.loginKanbanColumn[data-col="red"] .loginKanbanColumnHead { background: linear-gradient(180deg, rgba(226, 76, 76, 0.14), rgba(255, 255, 255, 0.78)); }

.loginKanbanColumn[data-col="green"] .loginKanbanColumnHead i { background: #27b36a; }
.loginKanbanColumn[data-col="yellow"] .loginKanbanColumnHead i { background: #f2b81d; }
.loginKanbanColumn[data-col="orange"] .loginKanbanColumnHead i { background: #f28a2e; }
.loginKanbanColumn[data-col="red"] .loginKanbanColumnHead i { background: #e24c4c; }

.loginKanbanColumnHead {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(34, 96, 170, 0.08);
  color: #10253d;
  font-size: 12px;
  font-weight: 950;
}

.loginKanbanColumnHead i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.76);
}

.loginKanbanColumnHead span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loginKanbanColumnHead b {
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 96, 170, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #385a7b;
  font-size: 11px;
}

.loginKanbanCard {
  margin: 10px 10px 0;
  padding: 11px;
  border: 1px solid rgba(34, 96, 170, 0.10);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 253, 255, 0.94));
  color: #123150;
  box-shadow: 0 10px 22px rgba(17, 72, 145, 0.10);
  transform: translateZ(0);
  animation: loginKanbanCardPulse 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, box-shadow;
}

.loginKanbanCard strong {
  display: block;
  margin-bottom: 7px;
  color: #10253d;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 950;
}

.loginKanbanCard span {
  display: block;
  color: #6a84a5;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 750;
}

.loginKanbanCard em {
  width: fit-content;
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(13, 99, 201, 0.18);
  border-radius: 999px;
  background: rgba(13, 99, 201, 0.08);
  color: #0d3b78;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.loginKanbanCard.isActive {
  border-color: rgba(29, 143, 255, 0.28);
  animation-delay: 0.2s;
}

.loginKanbanCard.moving {
  animation-name: loginKanbanCardMove;
}

.loginKanbanCard.urgent {
  border-color: rgba(226, 76, 76, 0.22);
}


.loginPhonePreview {
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.loginPhoneChrome {
  width: min(100%, 230px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 3px solid #142238;
  border-radius: 32px;
  background: linear-gradient(180deg, #182338, #0f1728);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(0);
}

.loginPhoneChrome::before {
  content: "";
  align-self: center;
  width: 82px;
  height: 16px;
  margin: -2px 0 6px;
  border-radius: 0 0 14px 14px;
  background: #0f1728;
}

.loginPhoneTop {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 11px 9px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #0b8f74, #0a7c66);
  color: #ffffff;
}

.loginPhoneTop > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 950;
}

.loginPhoneTop div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.loginPhoneTop strong,
.loginPhoneTop small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loginPhoneTop strong {
  font-size: 12px;
  font-weight: 950;
}

.loginPhoneTop small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 750;
}

.loginPhoneMessages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 10px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.35), transparent 16%),
    #efeae2;
  overflow: hidden;
}

.loginPhoneMessages p,
.typingBubble {
  max-width: 88%;
  margin: 0;
  padding: 9px 10px;
  border-radius: 13px;
  color: #203344;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 780;
  box-shadow: 0 6px 12px rgba(15, 23, 40, 0.08);
  animation: loginPhoneBubble 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: opacity, transform;
}

.loginPhoneMessages .client {
  align-self: flex-start;
  background: #ffffff;
}

.loginPhoneMessages .agent {
  align-self: flex-end;
  background: #d9fdd3;
  animation-delay: 0.45s;
}

.loginPhoneMessages .short {
  animation-delay: 0.9s;
}

.typingBubble {
  align-self: flex-end;
  min-width: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #d9fdd3;
  animation-delay: 1.35s;
}

.typingBubble i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5f7a68;
  animation: loginTypingDot 1.15s ease-in-out infinite;
}

.typingBubble i:nth-child(2) { animation-delay: 0.16s; }
.typingBubble i:nth-child(3) { animation-delay: 0.32s; }

.loginPhoneComposer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-radius: 0 0 22px 22px;
  background: #efeae2;
}

.loginPhoneComposer span {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: #8a9aa9;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loginPhoneComposer b {
  flex: 0 0 auto;
  padding: 8px 9px;
  border-radius: 999px;
  background: #0b8f74;
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
}

.loginOrderDesk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: end;
}

.loginOrderSheet {
  align-self: center;
  min-height: 290px;
  padding: 28px;
  border-radius: 18px;
  background: #f8fbff;
  color: #123150;
  box-shadow: 0 24px 42px rgba(0, 0, 0, 0.24);
  animation: loginPaperSlide 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}

.loginOrderSheet i {
  display: block;
  height: 10px;
  margin-bottom: 13px;
  border-radius: 999px;
  background: #d9e8fa;
}

.loginOrderSheet i:nth-child(1) { width: 44%; background: #0d63c9; }
.loginOrderSheet i:nth-child(2) { width: 76%; }
.loginOrderSheet i:nth-child(3) { width: 62%; }

.loginOrderItems {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.loginOrderItems span {
  padding: 12px;
  border-radius: 12px;
  background: #edf6ff;
  color: #244762;
  font-size: 12px;
  font-weight: 800;
}

.loginPrinter {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 164px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #dcefff;
  font-size: 12px;
  font-weight: 900;
}

.loginPrinter img {
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
}

.loginProductGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-self: center;
}

.loginProductGrid div {
  min-height: 138px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  color: #123150;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
  animation: loginProductPop 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}

.loginProductGrid div:nth-child(2) { animation-delay: 0.18s; }
.loginProductGrid div:nth-child(3) { animation-delay: 0.36s; }

.loginProductGrid b {
  color: #0d63c9;
  font-size: 12px;
}

.loginProductGrid span {
  font-size: 14px;
  font-weight: 900;
}

.loginAutoMessage {
  align-self: start;
  justify-self: end;
  width: min(430px, 92%);
  padding: 13px 15px;
  border-radius: 16px 16px 4px 16px;
  background: #dcfce7;
  color: #14532d;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  animation: loginMessageSend 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}

.loginChannelOrbit {
  position: relative;
  min-height: 360px;
  display: grid;
  place-items: center;
}

.loginChannelOrbit::before,
.loginChannelOrbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(191, 226, 255, 0.20);
  border-radius: 28px;
  transform: rotate(-8deg);
}

.loginChannelOrbit::before { width: 72%; height: 58%; }
.loginChannelOrbit::after { width: 50%; height: 38%; transform: rotate(10deg); }

.loginChannelIcon {
  position: absolute;
  width: clamp(96px, 10vw, 148px);
  height: clamp(96px, 10vw, 148px);
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.34));
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  animation: loginChannelFloat 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}

.loginChannelIcon.whatsapp { --x: -180px; --y: 34px; }
.loginChannelIcon.instagram { --x: 0px; --y: -118px; animation-delay: 0.18s; }
.loginChannelIcon.email { --x: 180px; --y: 42px; animation-delay: 0.36s; }


.loginCinemaStage,
.loginKanbanBoard,
.loginOrderDesk,
.loginProductGrid,
.loginChannelOrbit {
  transform: translateZ(0);
}

.loginSceneHeader,
..loginOrderSheet,
.loginProductGrid div,
.loginAutoMessage,
.loginPrinter,
.loginChannelIcon {
  backface-visibility: hidden;
}

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

.loginShowcaseFooter span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #d8ecff;
  font-size: 12px;
  font-weight: 850;
}

.loginPanel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(34px, 4vw, 64px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
}

.loginPanelBrand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loginPanelBrand img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(13, 99, 201, 0.18);
}

.loginPanelBrand div,
.loginPanelTitle,
.loginFormFields {
  display: grid;
  gap: 6px;
}

.loginPanelBrand strong {
  color: #10253d;
  font-size: 16px;
  font-weight: 950;
}

.loginPanelBrand span,
.loginPanelTitle span {
  color: #6d86a3;
  font-size: 12px;
  font-weight: 800;
}

.loginPanelTitle h1 {
  margin: 0;
  color: #10253d;
  font-size: 36px;
  line-height: 1.02;
  font-weight: 950;
}

.loginFormFields {
  gap: 14px;
}

#loginModal .field {
  margin: 0;
}

#loginModal .field label {
  color: #254969;
  font-size: 12px;
  font-weight: 900;
}

#loginModal .field input {
  min-height: 48px;
  border-radius: 14px;
  border-color: rgba(34, 96, 170, 0.18);
  background: #f8fbff;
}

.loginAuthLinks {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: -2px 0 0;
}

.loginAuthLinks .linkBtn {
  background: none;
  border: 0;
  padding: 0;
  color: #0d63c9;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
}

.loginSubmit {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 18px 34px rgba(13, 99, 201, 0.22);
}

.loginSiteLink {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 96, 170, 0.16);
  border-radius: 14px;
  background: #ffffff;
  color: #0d63c9;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(17, 72, 145, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.loginSiteLink:hover,
.loginSiteLink:focus-visible {
  border-color: rgba(13, 99, 201, 0.30);
  box-shadow: 0 16px 30px rgba(17, 72, 145, 0.13);
  transform: translateY(-1px);
  outline: none;
}

.loginDeviceHint {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f3f8ff;
  color: #637b9b;
  font-size: 12px;
  line-height: 1.45;
}

@keyframes loginSceneCycle {
  0%, 19% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  24%, 94% { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.992); }
  100% { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.992); }
}

@keyframes loginLightSweep {
  0% { transform: translate3d(-26%, 0, 0); opacity: 0.42; }
  50% { opacity: 0.72; }
  100% { transform: translate3d(26%, 0, 0); opacity: 0.42; }
}

@keyframes loginPhoneBubble {
  0%, 100% { opacity: 0.82; transform: translate3d(0, 4px, 0); }
  35%, 74% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes loginTypingDot {
  0%, 100% { opacity: 0.35; transform: translate3d(0, 0, 0); }
  50% { opacity: 1; transform: translate3d(0, -3px, 0); }
}

@keyframes loginKanbanCardPulse {
  0%, 100% { transform: translate3d(0, 0, 0); box-shadow: 0 10px 22px rgba(17, 72, 145, 0.10); }
  45%, 62% { transform: translate3d(0, -4px, 0) scale(1.015); box-shadow: 0 16px 30px rgba(10, 86, 173, 0.15); }
}

@keyframes loginKanbanCardMove {
  0%, 100% { transform: translate3d(0, 0, 0); box-shadow: 0 10px 22px rgba(17, 72, 145, 0.10); }
  45%, 62% { transform: translate3d(-8px, -18px, 0) scale(1.03); box-shadow: 0 18px 34px rgba(242, 138, 46, 0.20); }
}

@keyframes loginPaperSlide {
  0%, 100% { transform: translate3d(0, 8px, 0) rotate(-1deg); }
  45%, 64% { transform: translate3d(0, -12px, 0) rotate(1deg); }
}

@keyframes loginProductPop {
  0%, 100% { transform: translate3d(0, 0, 0); }
  45%, 62% { transform: translate3d(0, -12px, 0); }
}

@keyframes loginMessageSend {
  0%, 100% { transform: translate3d(22px, 0, 0); opacity: 0.74; }
  45%, 70% { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes loginChannelFloat {
  0%, 100% { transform: translate3d(var(--x, 0px), var(--y, 0px), 0); }
  50% { transform: translate3d(var(--x, 0px), calc(var(--y, 0px) - 18px), 0); }
}

@media (max-width: 880px) {
  #loginModal {
    padding: 0;
  }

  #loginModal .loginExperienceModal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .loginShowcase {
    min-height: 280px;
    padding: 22px;
    gap: 14px;
  }

  .loginShowcaseTopline b {
    font-size: 30px;
  }

  .loginPanelTitle h1 {
    font-size: 30px;
  }

  .loginCinemaStage {
    min-height: 190px;
  }

  .loginKanbanStageGrid,
  .loginKanbanBoard,
  .loginProductGrid,
  .loginOrderDesk {
    grid-template-columns: 1fr;
  }

  .loginKanbanTopBar {
    align-items: flex-start;
    flex-direction: column;
  }

  .loginKanbanStats {
    justify-content: flex-start;
  }

  .loginKanbanColumn:nth-child(n+2),
  .loginPhonePreview,
  .loginPrinter,
  .loginShowcaseFooter {
    display: none;
  }

  .loginOrderSheet {
    min-height: 170px;
  }

  .loginChannelOrbit {
    min-height: 190px;
  }

  .loginChannelIcon.whatsapp { --x: -92px; --y: 24px; }
  .loginChannelIcon.instagram { --x: 0px; --y: -58px; }
  .loginChannelIcon.email { --x: 92px; --y: 26px; }

  .loginPanel {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loginShowcase::before,
  .loginScene,
  .loginPhoneMessages p,
  .typingBubble,
  .typingBubble i,
  .loginOrderSheet,
  .loginProductGrid div,
  .loginAutoMessage,
  .loginChannelIcon {
    animation: none !important;
  }

  .loginScene:first-child {
    opacity: 1;
    transform: none;
  }
}


.emailFormCard[hidden] {
  display: none !important;
}

.emailAccountItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.emailAccountActions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.emailBlockedDropdown {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.btn2.dangerSoft:disabled,
.emailAccountActions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .emailAccountItem {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .emailAccountActions {
    justify-content: flex-start;
  }
}


.emailFormCard {
  font-size: 14px;
  color: var(--ink);
}

.emailFormHeader strong,
.emailAccountsHeader strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.emailFormHeader span,
.emailAccountsHeader span {
  font-size: 14px;
  font-weight: 500;
}

.emailProviderOption {
  min-height: 86px;
  border-radius: 12px;
  background: #f7fbff;
  cursor: pointer;
}

.emailProviderOption:has(input:checked) {
  border-color: #7ab8ff;
  background: #edf6ff;
  box-shadow: inset 0 0 0 1px rgba(13, 123, 232, .12);
}

.emailProviderOption span {
  color: var(--ink);
  font-weight: 700;
}

.emailProviderOption small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.emailConfigGrid label,
.emailCheckboxField {
  color: #50698e;
  font-size: 13px;
  font-weight: 700;
}

.emailConfigGrid input,
.emailConfigGrid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  outline: none;
}

.emailConfigGrid input::placeholder {
  color: #8aa0bf;
  font-weight: 500;
}

.emailConfigGrid input:focus,
.emailConfigGrid select:focus {
  border-color: #7ab8ff;
  box-shadow: 0 0 0 3px rgba(13, 123, 232, .10);
}

.emailFlagsRow {
  justify-content: flex-start;
}

.emailFlagsRow label {
  min-width: 180px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.emailOAuthActions {
  justify-content: flex-start;
}

.emailOAuthActions .hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
}

.emailAccountItem {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.emailAccountActions {
  order: 2;
}

.emailAccountMeta {
  order: 3;
  min-width: 78px;
}

.emailBlockedDropdown {
  order: 4;
}

.emailBlockedDropdown .emailAccountEmpty {
  padding: 10px 12px;
  background: #f8fbff;
}

/* Compact inbox filters: the panel lives outside the scrolling toolbar. */
.compactInboxFilters { gap: 8px; align-items: center; }
.compactInboxFilters .compactFilterButton { box-sizing: border-box; height: 44px; min-height: 44px; font-size: 13px; line-height: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #dce8f7; border-radius: 14px; background: #fff; color: #19324f; white-space: nowrap; }
.compactInboxFilters .compactFilterButton.active,
.compactInboxFilters .compactFilterButton[aria-expanded="true"] { background: #eaf3ff; border-color: #bbd7ff; color: #075fbe; }
.compactInboxFilters .compactFilterButton > span { box-sizing: border-box; display: block; height: 26px; min-height: 26px; min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 20px; padding: 3px 7px; border: 0; background: #f0f6fd; border-radius: 8px; color: #286197; }
.compactInboxFilters .compactFilterButton > span[aria-hidden] { flex: 0 0 8px; width: 8px; height: 8px; min-height: 8px; min-width: 8px; padding: 0; margin: 0 2px; background: transparent; border: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; border-radius: 0; color: inherit; font-size: 0; line-height: 0; transform: translateY(-2px) rotate(45deg); }
.compactInboxTotal { display: inline-flex; align-items: center; height: 44px; margin: 0; line-height: 20px; font-size: 12px; color: #687f9a; white-space: nowrap; padding: 0 4px; }
.compactInboxFilterPanel { position: fixed; z-index: 12000; display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid #d8e5f5; border-radius: 16px; background: #fff; color: #19324f; box-shadow: 0 14px 45px rgba(24,62,109,.18); overflow: hidden; }
.compactInboxFilterPanel[hidden] { display: none; }
.compactFilterHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px 0; }
.compactFilterHeading { font-size: 14px; }
.compactFilterHeader button { border: 0; background: #f2f6fc; border-radius: 8px; color: #46627f; width: 28px; height: 28px; font-size: 20px; cursor: pointer; }
.compactFilterHint { margin: 8px 16px 12px; font-size: 12px; line-height: 1.5; color: #69809b; }
.compactFilterContent { overflow-y: auto; min-height: 0; padding: 0 8px 10px; overscroll-behavior: contain; }
.compactFilterOption { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0; padding: 8px 10px; box-sizing: border-box; border-radius: 10px; cursor: pointer; }
.compactFilterOption:hover, .compactFilterOption:focus-within { background: #f0f6ff; }
.compactFilterOption.isParent { font-weight: 750; }
.compactFilterOption.isChild { padding-left: 32px; font-size: 12px; color: #516b88; }
.compactFilterOption input { width: 17px; height: 17px; min-width: 17px; margin: 0; padding: 0; flex: 0 0 17px; accent-color: #086ccc; cursor: pointer; }
.compactFilterOptionLabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.compactFilterCount { font-size: 11px; font-weight: 700; background: #edf4fd; color: #286197; border-radius: 7px; padding: 3px 6px; }
.compactFilterFooter { border-top: 1px solid #e9eff7; padding: 10px 14px; display: flex; justify-content: flex-end; }
.compactFilterFooter button { border: 0; background: #086ccc; color: #fff; padding: 8px 14px; border-radius: 9px; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) { .compactInboxTotal { display: none; } .compactInboxFilters .compactFilterButton > span { max-width: 110px; } }

.compactInboxFilters .compactFilterButton > span[aria-hidden] { width: 8px !important; height: 8px !important; min-width: 8px !important; max-width: 8px !important; min-height: 8px !important; max-height: 8px !important; }
.compactInboxTotals { display: inline-flex; align-items: center; gap: 6px; height: 44px; flex: 0 0 auto; }
.compactInboxTotal, .compactInboxPending { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 28px; margin: 0; padding: 0 9px; border-radius: 8px; font-size: 12px; line-height: 20px; white-space: nowrap; }
.compactInboxTotal { color: #286197; background: #edf4fd; border: 1px solid #dbe9fa; }
.compactInboxPending { color: #946000; background: #fff7e6; border: 1px solid #f7dfa6; }
.compactFilterCountLegend { display: grid; grid-template-columns: minmax(0,1fr) 44px 58px; gap: 6px; padding: 0 18px 5px; color: #788da5; font-size: 10px; text-align: center; }
.compactFilterMetrics { display: grid; grid-template-columns: 44px 58px; gap: 6px; align-items: center; flex: 0 0 auto; }
.compactFilterMetrics .compactFilterCount { text-align: center; min-width: 0; }
.compactFilterCount.isPending { color: #946000; background: #fff3d8; }
.compactFilterCount.isPending.isZero { color: #8a98a9; background: #f1f4f8; }
@media (max-width: 640px) { .compactInboxTotals { display: none; } }

/* Override legacy toolbar rules that force smaller type and asymmetric padding. */
.compactInboxFilters .compactFilterButton { box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; font-size: 13px !important; line-height: 20px !important; padding: 0 12px !important; }
.compactInboxFilters .compactFilterButton > span:not([aria-hidden]) { display: block !important; box-sizing: border-box !important; height: 26px !important; min-height: 26px !important; padding: 0 7px !important; font-size: 13px !important; line-height: 26px !important; }
.compactInboxFilters .compactFilterButton > span[aria-hidden] { box-sizing: border-box !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; }
/* Contact list workspace: existing top filters stay in place. */
.inboxLayoutMenu{position:relative;flex:0 0 auto;margin-left:auto;color:#075cb5}
.inboxLayoutMenu>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1px solid #b9d6fc;border-radius:15px;background:#edf5ff;cursor:pointer;font-size:13px;white-space:nowrap}
.inboxLayoutMenu>summary::-webkit-details-marker{display:none}
.inboxLayoutMenu>summary b{font-size:12px;padding:4px 7px;background:#fff;border-radius:7px}
.inboxLayoutOptions{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;padding:10px;background:#fff;border:1px solid #d9e7f5;border-radius:16px;box-shadow:0 16px 40px #1d416526;z-index:1100}
.inboxLayoutOptions label{display:flex;align-items:center;gap:12px;padding:14px;border-radius:10px;cursor:pointer;color:#183449;font-size:14px}
.inboxLayoutOptions label:hover{background:#eef6ff}
.inboxLayoutOptions input{accent-color:#0873d7;width:18px;height:18px}
#contactListView[hidden]{display:none!important}
body.contactListMode #board{display:none!important}
body.appModeOrders #contactListView,body.appModeClients #contactListView,body.appModeOrders #inboxLayoutMenu,body.appModeClients #inboxLayoutMenu{display:none!important}
#contactListView{display:grid;grid-template-columns:minmax(290px,345px) minmax(360px,1fr) minmax(260px,315px);height:var(--contact-view-height,calc(100dvh - 180px));min-height:360px;margin:12px 20px 0;border:1px solid #dce7ef;border-radius:20px;overflow:hidden;background:#fff;color:#19344d;box-shadow:0 10px 35px #244b6a0a}
.contactListPane,.contactOrdersPane{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff;overflow:hidden}
.contactListPane{border-right:1px solid #dfE8ef}
.contactOrdersPane{border-left:1px solid #dfe8ef;background:#f9fbfd}
.contactPaneHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:72px;padding:16px 18px;border-bottom:1px solid #e6edf3;flex-shrink:0}
.contactPaneHeader h2{font-size:18px;line-height:1.3;margin:0;font-weight:750;color:#17344d}
.contactPaneHeader small{display:block;font-size:12px;color:#778b9d;margin-top:4px}
#contactListCount{font-size:12px;background:#eaf3ff;color:#0861be;padding:4px 9px;border-radius:9px;font-weight:700}
.contactRows,.contactOrdersList{min-height:0;overflow:auto;overscroll-behavior:contain;flex:1}
.contactListRow{display:flex!important;align-items:center;gap:12px;width:100%;min-height:100px;padding:15px 14px!important;border:0!important;border-bottom:1px solid #edf1f5!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;color:#16344d;text-align:left;cursor:pointer;font:inherit}
.contactListRow:hover{background:#f5f9fc!important}
.contactListRow.selected{background:#eaf4ff!important;box-shadow:inset 3px 0 #0875dc!important}
.contactListRow:focus-visible{outline:2px solid #0079dc;outline-offset:-3px}
.contactListRow .chatContactPhoto,.contactListFallback{width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#e9f2fb;color:#3a6b98;font-size:15px;font-weight:700}
.contactListIdentity{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0}
.contactListIdentity>strong{font-size:14px;line-height:1.35;font-weight:750;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:normal;word-break:normal}
.contactListPreview{font-size:13px;line-height:1.4;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#647b8f}
.contactListIdentity>small{font-size:10px;line-height:1.3;color:#8193a3;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.contactListMeta{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:0 0 auto;font-size:11px;color:#7e90a0}
.contactListMeta>small{color:#0864b7;background:#edf5ff;padding:2px 5px;border-radius:5px;font-size:10px}
.contactWait{display:inline-flex;align-items:center;justify-content:center;background:#fff5df;color:#946400;border:1px solid #ffe0a0;border-radius:7px;padding:3px 7px;font-size:11px;line-height:1.25;font-weight:700;white-space:nowrap}
.contactAnswered{color:#269b77;font-weight:700}
.contactSortFooter{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-top:1px solid #e3ecf3;background:#f8fafc;flex-shrink:0}
.contactSortFooter label{font-size:12px;color:#6f8192;white-space:nowrap}
.contactSortFooter select{font:inherit;font-size:12px;min-width:0;border:1px solid #d9e5ef;border-radius:10px;background:white;color:#264d70;padding:9px 6px}
.contactChatHost{min-width:0;min-height:0;position:relative;background:#f2f7fb;overflow:hidden;display:flex;flex-direction:column}
.contactChatEmpty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;max-width:480px;margin:auto;color:#7390a5}
.contactChatEmpty[hidden]{display:none!important}
.contactChatEmpty>span{font-size:50px;color:#a1bed4}
.contactChatEmpty h2{font-size:21px;font-weight:650;color:#345a76}
.contactChatEmpty p{font-size:14px;line-height:1.7}
body.contactListMode #contactChatHost>#chatDrawer{position:static!important;inset:auto!important;transform:none!important;z-index:auto!important;width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;flex:1;border-radius:0!important;box-shadow:none!important;border:0!important;display:none!important}
body.contactListMode #contactListView.hasConversation #chatDrawer{display:flex!important}
body.contactListMode #chatDrawerBackdrop{display:none!important}
body.contactListMode #chatDrawer .chatDrawerHeader{padding:16px 20px!important;background:#fff!important}
body.contactListMode #chatDrawer .chatDrawerMessages{flex:1;min-height:0;overflow:auto;background:#f2f7fb!important}
body.contactListMode #chatDrawerTitle{font-size:17px!important;line-height:1.35!important}
body.contactListMode #chatDrawer .chatDrawerActions{background:#fff!important;flex-wrap:wrap;gap:6px!important;padding:10px 16px!important}
body.contactListMode #chatDrawer .chatDrawerActions .btn{font-size:12px!important;padding:8px 11px!important;min-height:34px!important}
.contactOrderActions{display:flex;gap:8px;padding:14px;flex-shrink:0}
.contactOrderActions .btn,.contactOrderCard .btn{font-size:12px!important;padding:8px 12px!important;min-height:34px!important}
.contactOrderActions .btn{flex:1}
.contactOrdersList{padding:0 14px 14px}
.contactOrderCard{background:#fff;border:1px solid #dce7f1;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 3px 10px #25476305}
.contactOrderCard>div{display:flex;align-items:center;justify-content:space-between;gap:5px}
.contactOrderCard strong{font-size:12px;color:#0768bf;overflow-wrap:anywhere}
.contactOrderCard p{font-size:13px;line-height:1.55;margin:14px 0;color:#37546b;white-space:pre-wrap;overflow-wrap:anywhere}
.contactOrderCard small{display:block;font-size:11px;line-height:1.5;color:#8496a6;margin-bottom:12px}
.contactPaneEmpty{text-align:center;color:#8192a2;font-size:13px;line-height:1.7;padding:30px 16px}
@media(min-width:1600px){#contactListView{grid-template-columns:380px minmax(440px,1fr) 340px}}
@media(max-width:1200px){#contactListView{grid-template-columns:285px minmax(310px,1fr) 245px;margin-left:12px;margin-right:12px}.contactListRow{gap:8px;padding-left:10px!important;padding-right:10px!important}.contactListRow .chatContactPhoto,.contactListFallback{width:38px!important;height:38px!important;flex-basis:38px!important}}
@media(max-width:980px){#contactListView{grid-template-columns:250px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.contactOrdersPane{display:none}.contactListMode #chatDrawerViewOrders{display:inline-flex!important}}
@media(max-width:650px){#contactListView{display:flex;margin:8px;border-radius:14px;min-height:320px}.contactListPane{width:100%;border-right:0}.contactChatHost{display:none}.contactListView.hasConversation .contactListPane{display:none}.contactListView.hasConversation .contactChatHost{display:flex;width:100%}.inboxLayoutMenu{margin-left:0}.inboxLayoutMenu>summary{padding:0 10px;gap:6px}.inboxLayoutMenu>summary>span:not([class]):first-of-type{display:none}body.contactListMode #chatDrawer .chatDrawerHeader{padding:12px!important}}


.inboxLayoutOptions[hidden]{display:none!important}

/* Match the existing rail and toolbar grid without relocating the filters. */
.inboxViewActions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;order:3}
.inboxViewActions>.inboxLayoutMenu{margin-left:0;order:4}
body.appModeOrders .inboxViewActions,body.appModeClients .inboxViewActions{display:contents}
body:not(.isAuthenticated) #contactListView{display:none!important}
@media(min-width:900px){
  #contactListView{width:calc(100vw - var(--modern-rail,68px) - 28px);margin-left:calc(var(--modern-rail,68px) + 14px);margin-right:14px}
  .desktopFiltersBar .inboxToolbar .inboxViewActions{grid-column:3!important;grid-row:1!important;justify-self:end!important}
}
@media(min-width:900px) and (max-width:1199px){
  .inboxLayoutMenu>summary>span:not([class]):first-of-type{display:none}
  .inboxLayoutMenu>summary{padding:0 9px;gap:5px}
  .inboxLayoutMenu>summary b{max-width:115px;text-overflow:ellipsis;overflow:hidden}
}
/* Compact conversation chrome only in contact list; Pipeline stays unchanged. */
body.contactListMode #chatDrawer.chatDrawer .chatDrawerHeader{padding:8px 14px!important;gap:10px!important;min-height:0!important;align-items:flex-start!important}
body.contactListMode #chatDrawer .chatDrawerTitleWrap{flex:1;min-width:0}
body.contactListMode #chatDrawer .chatDrawerTitleLine{gap:7px}
body.contactListMode #chatDrawer .chatContactPhoto.chatHeaderPhoto{width:30px!important;height:30px!important;flex-basis:30px!important;font-size:11px!important}
body.contactListMode #chatDrawer.chatDrawer #chatDrawerTitle{font-size:16px!important;line-height:1.25!important}
body.contactListMode #chatDrawer .chatDrawerMeta{margin-top:2px!important;font-size:11px!important;line-height:1.35!important;gap:2px!important}
body.contactListMode #chatDrawer .chatDrawerMeta .channelBadge{min-height:18px;padding:1px 7px;font-size:10px;line-height:1.2}
body.contactListMode #chatDrawer .chatDrawerTitleLine .contactEditBtn,body.contactListMode #chatDrawer .chatDrawerTitleLine .contactMoreBtn{width:28px!important;height:28px!important;min-height:28px!important}
body.contactListMode #chatDrawer #chatDrawerClose{width:32px!important;height:32px!important;min-height:32px!important;border-radius:10px!important;flex-shrink:0}
body.contactListMode #chatDrawer.chatDrawer .chatDrawerActions{padding:6px 14px!important;gap:6px!important;min-height:0!important}
body.contactListMode #chatDrawer.chatDrawer .chatDrawerActions .btn{min-height:30px!important;height:32px!important;padding:5px 10px!important;font-size:12px!important;line-height:20px!important}
body.contactListMode #chatDrawer.chatDrawer #chatReplyBody{min-height:104px!important;max-height:260px!important;padding:12px 42px 12px 14px!important;font-size:16px!important;line-height:22px!important}
body.contactListMode #chatDrawer .chatComposer{padding:10px 12px!important}
body.contactListMode #chatDrawer .chatComposerFooter{gap:8px!important;margin-top:8px!important}
.contactListTags{display:flex;flex-wrap:wrap;gap:4px;min-width:0;margin:1px 0}
.contactListTag{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #cce0f5;border-radius:6px;padding:3px 6px;background:#edf5ff;color:#315a7d;font-size:10px;font-weight:650;line-height:1.25}
@media(max-width:650px){body.contactListMode #chatDrawer.chatDrawer .chatDrawerHeader{padding:8px 10px!important}body.contactListMode #chatDrawer.chatDrawer .chatDrawerActions{padding:6px 10px!important}body.contactListMode #chatDrawer.chatDrawer #chatReplyBody{min-height:88px!important;max-height:220px!important}}

/* New contact-list workspace: slightly wider side columns and a small feature badge. */
.inboxLayoutMenu>summary{position:relative}
.inboxLayoutMenu>summary>.inboxFeatureNew{position:absolute;top:2px;right:8px;display:inline-flex!important;align-items:center;height:13px;padding:0 6px;border-radius:5px;background:#0875d8;color:#fff;font-size:8px;font-weight:750;line-height:13px;letter-spacing:.2px;box-shadow:0 0 0 2px #f7f9fc;pointer-events:none}
@media(max-width:1199px){.inboxLayoutMenu>summary>span:not([class]):not([aria-hidden]){display:none}}
/* OS channel filter and explicit bulk selection. */
.osBulkToolbar{display:none}
body.appModeOrders .osBulkToolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 14px;margin:10px 0 14px;border:1px solid #dbe6f3;border-radius:15px;background:#fff;color:#294b68;font-size:12px}
.osChannelFilter{display:flex;align-items:center;gap:8px;font-weight:700}
.osChannelFilter select{max-width:260px;min-width:160px;border:1px solid #d9e5f2;border-radius:9px;background:#fff;color:#244c70;padding:8px;font:inherit;font-weight:500}
.osSelectAll{display:flex;align-items:center;gap:8px;cursor:pointer}
.osSelectAll input,.osOrderSelection input{width:17px;height:17px;accent-color:#0875d8;flex-shrink:0;cursor:pointer}
#osBulkCount{color:#0965b5;font-weight:700;white-space:nowrap}
.osBulkToolbar .btn{font-size:12px!important;min-height:34px!important;padding:8px 12px!important}
.osBulkResult{width:100%;font-size:12px;color:#607b91;line-height:1.5}
.osBulkResult:empty{display:none}
.osOrderSelection{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-size:11px;color:#52728f;cursor:pointer;width:fit-content}
.osOrderSelection span{line-height:1.4}
.serviceOrdersInlineItem>.osOrderSelection{align-self:flex-start;margin:0 10px 0 0;flex-shrink:0}
.serviceOrdersInlineItem>.osOrderSelection span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.contactOrderButtons{display:flex;align-items:center;gap:7px;margin-top:10px}
.contactOrderButtons .btn{flex:1}
@media(max-width:650px){.osChannelFilter{width:100%}.osChannelFilter select{flex:1;max-width:none}.osSelectAll{width:100%}.osBulkToolbar{gap:8px}}


body.appModeOrders #serviceOrdersBoardView{display:flex!important;flex-direction:column}body.appModeOrders #osBulkToolbar{flex:0 0 auto}body.appModeOrders #serviceOrdersViewList{flex:1;min-height:0;height:auto!important;overflow:auto}body.appModeOrders #serviceOrdersViewList.kanbanMode{overflow:hidden}

/* OS actions always get their own full row. */
body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter,
body.appModeOrders #serviceOrdersViewList .serviceOrdersInlineActions{display:flex!important;flex-wrap:wrap!important;min-width:0!important;width:100%!important;box-sizing:border-box}
body.appModeOrders #serviceOrdersViewList .serviceOrderStatusActions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));order:10!important;flex:0 0 100%!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;box-sizing:border-box;margin-top:4px}
body.appModeOrders #serviceOrdersViewList .serviceOrderStatusActions .serviceOrderStatusBtn{width:100%!important;min-width:0!important;min-height:36px!important;padding:0 6px!important}
body.appModeOrders #serviceOrdersViewList .serviceOrderOperationPicker{min-width:0!important;max-width:100%!important;flex:1 1 180px!important;box-sizing:border-box}
body.appModeOrders #serviceOrdersViewList .serviceOrderOperationSelect{min-width:0!important;max-width:100%!important;width:100%!important}
/* Let the list page own vertical scrolling; retain column scrolling in Kanban. */
body.appModeOrders #serviceOrdersBoardView:has(#serviceOrdersViewList:not(.kanbanMode)){display:block!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin}
body.appModeOrders #serviceOrdersViewList:not(.kanbanMode){display:block!important;flex:none!important;height:auto!important;min-height:0!important;overflow:visible!important}
body.appModeOrders #serviceOrdersViewList:not(.kanbanMode)>.serviceOrdersClientCard{margin:0 0 12px!important}
body.appModeOrders #serviceOrdersBoardView:has(#serviceOrdersViewList:not(.kanbanMode)) #osBulkToolbar{position:sticky;top:0;z-index:5;box-shadow:0 5px 12px #2446630a}
/* A checkbox is a separate column, followed by the main text and full-width actions. */
body.appModeOrders #serviceOrdersViewList .serviceOrdersInlineItem{display:grid!important;grid-template-columns:24px minmax(0,1fr)!important;align-items:start!important;min-width:0}
body.appModeOrders #serviceOrdersViewList .serviceOrdersInlineItem>.osOrderSelection{grid-column:1;grid-row:1;margin:2px 0 0!important}
body.appModeOrders #serviceOrdersViewList .serviceOrdersInlineMain{grid-column:2;grid-row:1;min-width:0}
body.appModeOrders #serviceOrdersViewList .serviceOrdersInlineActions{grid-column:1/-1}
body.appModeOrders #serviceOrdersViewList .serviceOrdersInlineItem:not(:has(.osOrderSelection)){grid-template-columns:minmax(0,1fr)!important}
body.appModeOrders #serviceOrdersViewList .serviceOrdersInlineItem:not(:has(.osOrderSelection))>.serviceOrdersInlineMain{grid-column:1;grid-row:1}

/* Bound each grid track and its card before laying out controls. */
body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanCards{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;overflow-x:hidden!important}
body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanCard{display:grid!important;grid-template-columns:minmax(0,1fr)!important;min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important}
body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanCard>*{min-width:0;max-width:100%;box-sizing:border-box}
body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter{display:grid!important;grid-template-columns:auto minmax(0,1fr) 34px!important;width:100%!important;min-width:0!important;max-width:100%!important;gap:8px!important;box-sizing:border-box!important}
body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter>.serviceOrderPriority{grid-column:1;grid-row:1;max-width:100%;min-width:0}
body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter>.serviceOrderOperationPicker{grid-column:2;grid-row:1;display:grid!important;grid-template-columns:minmax(0,1fr)!important;min-width:0!important;width:100%!important;max-width:100%!important;gap:3px!important}
body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter>.serviceOrderIconBtn{grid-column:3;grid-row:1;align-self:end;min-width:0!important;width:34px!important;max-width:34px!important;box-sizing:border-box!important}
body.appModeOrders #serviceOrdersViewList .serviceOrderOperationPicker select{min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;text-overflow:ellipsis}
body.appModeOrders #serviceOrdersViewList .osBoundedStatusActions{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;flex:0 0 100%!important;min-width:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;gap:6px!important;margin:4px 0 0!important;border:0!important;overflow:visible!important}
body.appModeOrders #serviceOrdersViewList .osBoundedStatusActions>.serviceOrderStatusBtn{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important;width:100%!important;max-width:100%!important;min-height:36px!important;height:auto!important;box-sizing:border-box!important;margin:0!important;padding:8px 4px!important;border:1px solid #d5e3f1!important;border-radius:9px!important;background:#fff!important;color:#22649e!important;font-size:11px!important;font-weight:650!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important;cursor:pointer}
body.appModeOrders #serviceOrdersViewList .osBoundedStatusActions>.serviceOrderStatusBtn.active,body.appModeOrders #serviceOrdersViewList .osBoundedStatusActions>.serviceOrderStatusBtn:disabled{background:#e9f3ff!important;color:#075fb6!important;cursor:default}
body.appModeOrders #serviceOrdersViewList .osBoundedStatusActions>.serviceOrderStatusBtn:not(:disabled):hover{background:#f0f7ff!important;border-color:#99c4ef!important}
body.appModeOrders #serviceOrdersViewList .serviceOrdersInlineActions>.osBoundedStatusActions{order:10!important}
@media(max-width:480px){body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter{grid-template-columns:minmax(0,1fr) 34px!important}body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter>.serviceOrderPriority{grid-column:1;grid-row:1;justify-self:start}body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter>.serviceOrderOperationPicker{grid-column:1;grid-row:2}body.appModeOrders #serviceOrdersViewList .serviceOrdersKanbanFooter>.serviceOrderIconBtn{grid-column:2;grid-row:2}}

/* Contextual attendance selection reuses the current toolbar row. */
#bulkAttendBar[hidden]{display:none!important}
#bulkAttendBar{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;padding:4px 7px;border:1px solid #bad6f3;border-radius:13px;background:#edf6ff;color:#145386;box-sizing:border-box}
#bulkAttendCount{font-size:12px;font-weight:700;white-space:nowrap}
#bulkAttendBar>label{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;margin-right:auto}
#bulkAttendBar input,.bulkAttendPick input{width:17px;height:17px;accent-color:#086cd1;cursor:pointer;margin:0;flex-shrink:0}
#bulkAttendBar .btn{min-height:32px!important;padding:6px 10px!important;font-size:12px!important;white-space:nowrap}
#bulkAttendExit{width:30px;height:32px;border:0;background:transparent;color:#195e9c;border-radius:7px;font-size:22px;flex-shrink:0;cursor:pointer}
.bulkAttendPick{display:none;position:absolute;z-index:3;align-items:center;justify-content:center;background:#fff;border-radius:8px;cursor:pointer;box-sizing:border-box}
.bulkContactWrap{position:relative;min-width:0}
.bulkContactWrap>.bulkAttendPick{left:15px;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%}
#board .card>.bulkAttendPick{left:14px;top:16px;width:26px;height:30px}
body.bulkAttendSelecting .bulkAttendPick{display:flex}
body.bulkAttendSelecting #board .card .cardIdentityLine{padding-left:30px}
body.bulkAttendSelecting .bulkAttendChosen{box-shadow:inset 3px 0 #0874d5!important;background:#edf6ff!important}
body.appModeOrders [data-start-bulk-attend],body.appModeClients [data-start-bulk-attend]{display:none!important}
@media(min-width:900px){
 .desktopFiltersBar .inboxToolbar #bulkAttendBar{grid-column:2!important;grid-row:1!important;width:100%}
 body.bulkAttendSelecting .desktopFiltersBar .inboxToolbar .compactInboxFilters{grid-row:1!important;visibility:hidden!important;pointer-events:none}
 body.bulkAttendSelecting .desktopFiltersBar .filtersShell.inboxToolbar{grid-template-columns:minmax(140px,210px) minmax(0,1fr) auto!important}
 body.bulkAttendSelecting .inboxViewActions>[data-start-bulk-attend],body.bulkAttendSelecting #btnQuickClearFilters{display:none!important}
}
@media(max-width:899px){
 [data-start-bulk-attend]{display:none!important}
 .siteHeader .top{position:relative}
 .siteHeader .top>#bulkAttendBar{position:absolute;inset:0;z-index:80;width:100%;height:100%;min-height:44px;background:#f4f9ff;border-radius:0}
 #bulkAttendCount{font-size:11px;max-width:85px;white-space:normal;line-height:1.3}
 #bulkAttendBar>label{font-size:11px}
 #bulkAttendBar .btn{font-size:11px!important;padding:6px 8px!important}
 body:not(.appModeOrders):not(.appModeClients) .bulkAttendPick{display:flex}
 .bulkContactWrap>.bulkAttendPick{left:34px;top:62px;transform:none;width:26px;height:26px;border:1px solid #d4e4f4}
 body.bulkAttendSelecting .bulkContactWrap>.bulkAttendPick{left:10px;top:50%;transform:translateY(-50%);width:42px;height:42px}
 #board .card .cardIdentityLine{padding-left:30px}
}

@media(max-width:899px){#bulkAttendBar>label>span{font-size:0}#bulkAttendBar>label>span::after{content:'Todos';font-size:11px}}

/* Message reaction controls */
.chatReactionControl{position:static;display:inline-block;align-self:center;}
.chatReactionControl summary{list-style:none;cursor:pointer;color:#1260a9;font-size:12px;font-weight:600;padding:5px 7px;border-radius:7px;white-space:nowrap;}
.chatReactionControl:not([open]) .chatReactionPicker{display:none;}
.chatReactionControl summary::-webkit-details-marker{display:none;}
.chatReactionControl summary:hover,.chatReactionControl[open] summary{background:#e9f2ff;}
.chatReactionControl summary:focus-visible{outline:2px solid #2563eb;outline-offset:2px;}
.chatReactionPicker{position:absolute;bottom:100%;right:0;z-index:30;display:flex;flex-wrap:wrap;gap:2px;width:248px;max-width:calc(100vw - 48px);padding:7px;background:#fff;border:1px solid #d8e2ef;border-radius:14px;box-shadow:0 4px 18px #15345a26;}
.chatBubbleActions .chatReactionPicker button{display:flex;align-items:center;justify-content:center;box-sizing:border-box;flex:0 0 36px;min-width:36px;min-height:36px;padding:3px;background:transparent;border:0;border-radius:8px;font-size:23px;line-height:1;cursor:pointer;}
.chatBubbleActions .chatReactionPicker button:hover,.chatBubbleActions .chatReactionPicker button[aria-pressed=true]{background:#e4efff;}
.chatBubbleActions .chatReactionPicker button:disabled{opacity:.5;cursor:wait;}
.chatBubbleActions .chatReactionPicker .chatReactionRemove{font-size:21px;color:#a42d35;}
.chatMessage.theirs .chatReactionPicker{right:auto;left:0;}
.chatBubble:has(.chatReactionControl[open]){z-index:35;position:relative;}

/* Expanded emoji catalog */
.chatReactionPicker{max-height:220px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}


/* Anchor the unread shortcut to the history, independent of composer height. */
.chatHistoryPane {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}
.chatHistoryPane > .chatDrawerMessages {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}
.chatHistoryPane > .chatNewMessagesIndicator {
  right: 16px;
  bottom: 12px;
  max-width: calc(100% - 32px);
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(11, 116, 222, .20);
}
.chatHistoryPane > .chatNewMessagesIndicator:hover {
  box-shadow: 0 6px 16px rgba(11, 116, 222, .24);
}
@media (max-width: 650px) {
  .chatHistoryPane > .chatNewMessagesIndicator {
    right: 12px;
    bottom: 10px;
    max-width: calc(100% - 24px);
    min-height: 44px;
  }
}

/* The search scope is part of the field, without an additional toolbar row. */
.filterInlineSearch { flex-wrap:nowrap; }
.searchFilterControl { position:relative; width:100%; }
.searchFilterControl input { width:100%; min-width:0; padding-right:164px !important; }
.searchFilterControl .conversationSearchScope {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:104px !important; min-width:0 !important; max-width:104px; height:32px !important;
  min-height:32px !important; margin:0 !important; padding:4px 4px 4px 9px !important;
  border:0 !important; border-left:1px solid #d7dfd9 !important; border-radius:0 !important;
  background-color:transparent !important; box-shadow:none !important;
  color:#38516b !important; font-size:12px !important; cursor:pointer;
}
.searchFilterControl .searchFilterStatus { display:none !important; }
.searchFilterControl .searchFilterClear { right:116px; width:24px; height:24px; }
.searchFilterControl .conversationSearchStatus {
  position:absolute; right:144px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; font-size:0; line-height:14px; color:#58779c;
}
.conversationSearchStatus:empty { display:none; }
.searchFilterControl[data-search-state="busy"] .conversationSearchStatus::after {
  content:""; display:block; width:12px; height:12px; border:2px solid #c8d8e8;
  border-top-color:#1677db; border-radius:50%; animation:conversationSearchSpin .8s linear infinite;
}
.searchFilterControl[data-search-state="notice"] .conversationSearchStatus::after {
  content:"!"; display:block; font-size:12px; font-weight:700; text-align:center;
  color:#a86600; border:1px solid #d6ab60; border-radius:50%;
}
@keyframes conversationSearchSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .searchFilterControl[data-search-state="busy"] .conversationSearchStatus::after { animation:none; }
}