:root {
  --bg: #f4f6f8;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --surface-soft: #f8fafb;
  --surface-muted: #f8fafb;
  --line: #dce3e9;
  --border: #dce3e9;
  --line-soft: #edf1f5;
  --text: #16202a;
  --muted: #667381;
  --muted-2: #8a97a5;
  --accent: #087a8f;
  --accent-strong: #06677a;
  --accent-soft: #e8f7fa;
  --success: #138a55;
  --warning: #b87503;
  --danger: #b84a4a;
  --shadow-sm: 0 1px 2px rgba(20, 32, 42, 0.06), 0 8px 24px rgba(20, 32, 42, 0.05);
  --shadow-md: 0 18px 50px rgba(20, 32, 42, 0.14);
  --radius: 12px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--bg);
}

body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100dvh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(8, 122, 143, 0.10), transparent 30rem),
    linear-gradient(180deg, #f8fafb 0%, var(--bg) 38%);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

h1,
h2,
h3,
p {
  margin: 0;
}

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

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

button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  cursor: pointer;
  font-weight: 750;
  padding: 7px 12px;
  transition:
    transform 120ms var(--ease),
    box-shadow 120ms var(--ease),
    border-color 120ms var(--ease),
    background 120ms var(--ease),
    color 120ms var(--ease);
}

button:hover:not(:disabled) {
  border-color: rgba(8, 122, 143, 0.34);
  background: #f7fbfc;
  box-shadow: var(--shadow-sm);
  transform: translateY(-0.5px);
}

button:active:not(:disabled) {
  transform: translateY(0);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

button.active,
button.primary {
  border-color: var(--accent);
  background: #0a8ea6;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(8, 122, 143, 0.18);
}

button.active:hover:not(:disabled),
button.primary:hover:not(:disabled) {
  border-color: var(--accent);
  background: #087f96;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(8, 122, 143, 0.22);
}

button.is-saving,
button.is-saving:hover:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(8, 122, 143, 0.36);
  background: #e8f7fa;
  color: var(--accent-strong);
  box-shadow: none;
  transform: none;
}

button.is-saving::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid rgba(8, 122, 143, 0.22);
  border-top-color: var(--accent-strong);
  border-radius: 999px;
  animation: saveSpin 700ms linear infinite;
}

button.is-saved,
button.is-saved:hover:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(45, 151, 91, 0.32);
  background: #eaf8ef;
  color: #247a48;
  box-shadow: 0 8px 18px rgba(45, 151, 91, 0.12);
  transform: scale(1.015);
}

button.is-error,
button.is-error:hover:not(:disabled) {
  border-color: rgba(184, 74, 74, 0.32);
  background: #fff3f3;
  color: #9b3030;
  box-shadow: none;
}

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

button.danger {
  border-color: rgba(184, 74, 74, 0.32);
  color: #9b3030;
}

button.ghost {
  border-color: rgba(8, 122, 143, 0.22);
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow: none;
}

button.ghost:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

button.subtle {
  background: transparent;
  box-shadow: none;
}

input,
select,
textarea,
.draft-editor {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  transition:
    border-color 140ms var(--ease),
    box-shadow 140ms var(--ease),
    background 140ms var(--ease);
}

input:focus,
select:focus,
textarea:focus,
.draft-editor:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(8, 122, 143, 0.12);
  outline: 0;
}

.hidden {
  display: none !important;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(220px, 270px);
  grid-template-areas: "brand views .";
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.86);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 30px rgba(20, 32, 42, 0.05);
}

.brand {
  grid-area: brand;
  min-width: 0;
}

.brand-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand h1 {
  overflow: hidden;
  font-size: 19px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-back-button {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 32px;
  border-color: rgba(203, 215, 224, 0.95);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
  color: var(--accent-strong);
  padding: 5px 10px 5px 26px;
  position: relative;
}

.app-back-button::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.app-back-button:hover:not(:disabled) {
  background: var(--accent-soft);
  box-shadow: none;
  transform: none;
}

.brand p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 13px;
}

.state-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 4px rgba(138, 151, 165, 0.14);
}

.state-dot.open {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(19, 138, 85, 0.14);
}

.state-dot.connecting {
  background: #d49a20;
  box-shadow: 0 0 0 4px rgba(212, 154, 32, 0.16);
}

nav,
.view-tabs {
  display: flex;
  min-width: 0;
  gap: 6px;
}

#viewTabs {
  grid-area: views;
  justify-self: center;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

#filters {
  justify-content: flex-end;
}

#reviewHeaderControls {
  width: min(390px, 100%);
}

#spareroomHeaderControls {
  width: min(1120px, 100%);
}

nav button,
.view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  white-space: nowrap;
}

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #e12f52;
  color: #ffffff;
  font-size: 12px;
  font-weight: 880;
  line-height: 1;
  padding: 0 7px;
  box-shadow: 0 8px 18px rgba(225, 47, 82, 0.22);
}

button.active .nav-badge {
  background: #ffffff;
  color: var(--accent-strong);
  box-shadow: 0 5px 14px rgba(20, 32, 42, 0.14);
}

.toggle {
  grid-area: toggle;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.toggle input,
.select-chat input,
.inline-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.batch-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.batch-button:disabled {
  display: none;
}

.main-page,
.dashboard-page,
.spareroom-page,
.emails-page,
.property-memory-page,
.properties-page,
.tenant-support-page,
.tenancy-page,
.settings-page {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 20px;
  animation: pageIn 180ms var(--ease);
}

.main-page {
  display: grid;
  align-content: start;
  gap: 18px;
}

.module-hero,
.tenancy-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(232, 247, 250, 0.76)),
    var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.module-hero h2,
.tenancy-hero h2 {
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: 0;
}

.module-hero p,
.tenancy-hero p {
  max-width: 680px;
  margin-top: 8px;
  font-size: 15px;
}

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

.module-card {
  display: grid;
  min-height: 220px;
  align-content: end;
  gap: 10px;
  border-radius: 20px;
  padding: 24px;
  text-align: left;
}

.module-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.module-card strong {
  max-width: 520px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.08;
}

.module-card p {
  max-width: 560px;
  font-size: 15px;
  color: var(--muted);
}

.module-card.direct-module,
.module-card.spareroom-module,
.module-card.properties-module,
.module-card.emails-module,
.module-card.bills-module,
.module-card.settings-module {
  min-height: 200px;
}

.lead-module {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(232, 247, 250, 0.9)),
    var(--surface-solid);
}

.tenancy-module {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(236, 244, 238, 0.94)),
    var(--surface-solid);
}

.bills-module {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 239, 0.94)),
    var(--surface-solid);
}

.emails-module {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(232, 247, 250, 0.72)),
    var(--surface-solid);
}

.bills-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
}

.module-header-row,
.bills-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}

.module-header-row h2 {
  margin-top: 4px;
  font-size: 24px;
}

.module-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.module-header-actions input {
  width: min(420px, 42vw);
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 14px;
  background: #fff;
}

.bills-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  box-shadow: none;
}

.bills-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.segmented-control {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #eef4f8;
  padding: 4px;
}

.segmented-control button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

.segmented-control button.active {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.bills-content {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-solid);
  min-height: 0;
  overflow: hidden;
}

.module-shell-page {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #f3f6fa;
  animation: pageIn 180ms var(--ease);
}

.module-shell-nav {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #ffffff;
  padding: 14px 10px;
}

.module-shell-nav-head {
  padding: 6px 6px 12px;
}

.module-shell-nav-head h2 {
  margin-top: 5px;
  font-size: 18px;
}

.module-shell-nav-head p {
  margin-top: 6px;
  font-size: 12px;
}

.module-shell-subnav {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.module-shell-subnav button {
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  padding: 6px 10px;
  text-align: left;
}

.module-shell-subnav button:hover:not(:disabled) {
  background: var(--surface-soft);
  box-shadow: none;
}

.module-shell-subnav button.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: none;
}

.module-workbench {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.module-workbench-toolbar {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  padding: 16px 22px;
  backdrop-filter: blur(14px);
}

.module-workbench-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.module-workbench-toolbar h2 {
  margin-top: 3px;
}

.module-workspace {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

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

.module-overview-grid article,
.module-link-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}

.module-overview-grid article {
  min-height: 118px;
  padding: 16px;
}

.module-overview-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.module-overview-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
}

.module-overview-grid p {
  margin-top: 8px;
  font-size: 13px;
}

.module-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.module-link-panel {
  padding: 16px;
}

.module-row-link {
  display: grid;
  grid-template-columns: minmax(110px, 0.38fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: 12px;
  padding: 12px 0;
  text-align: left;
}

.module-row-link:hover:not(:disabled) {
  border-color: var(--line-soft);
  background: transparent;
  box-shadow: none;
  color: var(--accent-strong);
  transform: none;
}

.module-row-link span {
  color: var(--muted);
  font-weight: 700;
}

.module-row-link strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 940px) {
  .module-shell-page {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 12px;
    overflow: auto;
    overflow-x: hidden;
    padding: 12px;
  }

  .module-shell-nav {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
  }

  .module-shell-nav-head {
    padding: 4px 4px 10px;
  }

  .module-shell-subnav {
    display: flex;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .module-shell-subnav button {
    flex: 0 0 auto;
    width: auto;
  }

  .module-workbench {
    width: 100%;
    max-width: 100%;
    min-height: 70dvh;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    overflow: hidden;
  }

  .module-workbench-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .module-workspace {
    padding: 14px;
  }

  .module-overview-grid,
  .module-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .module-row-link {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .module-row-link strong {
    white-space: normal;
  }

  .lead-module-logbook-layout {
    grid-template-columns: 1fr;
  }

  .lead-module-logbook-leads,
  .lead-module-logbook-entries {
    max-height: 300px;
  }
}

.bills-workspace {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.bills-list-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #fbfdff;
}

.bills-summary-strip.compact {
  gap: 10px;
  justify-content: space-between;
  padding: 12px 14px;
}

.bills-summary-strip.compact strong {
  font-size: 17px;
}

.bills-property-list {
  min-height: 0;
  overflow: auto;
}

.bill-property-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 68px;
  border: 0;
  border-bottom: 1px solid #e7edf2;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: #fff;
  padding: 10px 12px;
  box-shadow: none;
  text-align: left;
}

.bill-property-row:hover:not(:disabled) {
  background: #f6fbfd;
  box-shadow: none;
}

.bill-property-row.selected {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.bill-property-row strong,
.bill-property-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bill-property-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.bill-property-row em {
  color: var(--text);
  font-style: normal;
  font-weight: 850;
}

.bills-detail-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.bills-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  color: var(--muted);
  font-size: 13px;
}

.bills-summary-strip strong {
  color: var(--text);
  font-size: 18px;
}

.bills-table-wrap {
  overflow: auto;
}

.bills-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.bills-table th,
.bills-table td {
  border-bottom: 1px solid #e7edf2;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.bills-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.bills-table td {
  font-size: 14px;
}

.bills-table tr:hover td {
  background: #f6fbfd;
}

.bills-table tr[data-bill-property] {
  cursor: pointer;
}

.bills-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.bill-property-editor {
  display: grid;
  gap: 0;
}

.bill-property-head,
.bill-calculator-panel,
.bill-space-apply,
.bill-editor-actions {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.bill-property-head.record-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bill-property-head h3 {
  margin: 2px 0 0;
  font-size: 28px;
}

.bill-property-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.bill-property-total {
  flex: 0 0 auto;
  text-align: right;
}

.bill-property-link select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
}

.bill-property-link {
  flex: 0 1 360px;
  min-width: 240px;
}

.bill-property-total span,
.bill-property-link span,
.bill-calculator-panel label span,
.bill-metric span,
.bill-utility-row label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.bill-property-total strong {
  font-size: 24px;
}

.bills-tenancy-table {
  display: grid;
  min-width: 1320px;
}

.deposit-protection-table {
  display: grid;
  min-width: 1040px;
}

.bills-tenancy-head,
.bills-tenancy-row {
  display: grid;
  grid-template-columns: 34px minmax(170px, 1.2fr) repeat(7, minmax(100px, 0.7fr)) minmax(110px, 0.75fr) minmax(105px, 0.65fr) minmax(130px, 0.85fr);
  align-items: center;
  gap: 12px;
}

.deposit-protection-head,
.deposit-protection-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.55fr) minmax(230px, 1.35fr) minmax(240px, 1.35fr) minmax(110px, 0.65fr) minmax(110px, 0.65fr) minmax(130px, 0.75fr);
  align-items: center;
  gap: 14px;
}

.bills-tenancy-head {
  border-bottom: 1px solid var(--line);
  padding: 12px 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.deposit-protection-head {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  padding: 10px 14px;
  text-transform: uppercase;
}

.bills-tenancy-row {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid #e7edf2;
  border-radius: 0;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 11px 20px;
  box-shadow: none;
  text-align: left;
}

.deposit-protection-row {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 10px 14px;
  text-align: left;
  transition: background 140ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.bills-total-row {
  position: sticky;
  bottom: 0;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: #fffdf2;
}

.bills-tenancy-row:hover,
.bills-tenancy-row.selected,
.bills-tenancy-row.bulk-selected {
  background: #eefbfe;
  box-shadow: none;
  transform: none;
}

.deposit-protection-row:hover:not(:disabled),
.deposit-protection-row.selected {
  background: #eef9fb;
  box-shadow: inset 3px 0 0 var(--accent);
  transform: translateX(2px);
}

.bills-tenancy-row strong,
.bills-tenancy-row span,
.bills-tenancy-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deposit-protection-row strong,
.deposit-protection-row span,
.deposit-protection-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deposit-protection-row span {
  display: grid;
  gap: 2px;
}

.bills-tenancy-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.tenancy-records.list-only:has(.bills-tenancy-table) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0);
  justify-content: stretch;
}

.tenancy-records.list-only:has(.deposit-protection-table) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0);
  justify-content: stretch;
}

.tenancy-records.list-only:has(.bills-tenancy-table) .tenancy-list-pane {
  width: 100%;
  max-width: none;
}

.tenancy-records.list-only:has(.deposit-protection-table) .tenancy-list-pane {
  width: 100%;
  max-width: none;
}

.tenancy-records.list-only:has(.bills-tenancy-table) .tenancy-record-list {
  overflow-x: auto;
}

.tenancy-records.list-only:has(.deposit-protection-table) .tenancy-record-list {
  overflow-x: auto;
}

.bill-calculator-panel {
  display: grid;
  grid-template-columns: 1fr 150px 1fr 150px minmax(220px, 1.2fr);
  gap: 12px;
  align-items: end;
  background: #f8fbfd;
}

.bill-share-breakdown {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 18px;
  background: #ffffff;
}

.bill-share-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.bill-share-head h4 {
  margin-top: 2px;
  font-size: 16px;
}

.bill-share-head > strong {
  font-size: 22px;
}

.bill-share-table {
  width: min(460px, 100%);
  border: 1px solid #d9e1e8;
  border-radius: 8px;
  overflow: hidden;
}

.bill-share-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 140px;
  min-height: 28px;
  border-bottom: 1px solid #e8edf2;
}

.bill-share-row:last-child {
  border-bottom: 0;
}

.bill-share-row span,
.bill-share-row strong {
  display: flex;
  align-items: center;
  padding: 5px 8px;
}

.bill-share-row strong {
  justify-content: flex-end;
  border-left: 1px solid #e8edf2;
}

.bill-share-row-head {
  background: #eaf2ff;
  font-weight: 850;
}

.bill-share-row-total {
  background: #fffdf2;
  font-weight: 900;
}

.bill-metric {
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 11px 12px;
}

.bill-metric strong {
  display: block;
  font-size: 20px;
}

.bill-calculator-panel input,
.bill-utility-row input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.bill-utility-list {
  display: grid;
  padding: 8px 0;
}

.bill-utility-row {
  display: grid;
  grid-template-columns: 170px 150px minmax(220px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin: 0 14px 8px;
  padding: 12px;
  border: 1px solid #e0e8ef;
  border-radius: 8px;
  background: #fff;
}

.bill-utility-row h4 {
  margin: 0;
}

.bill-utility-title small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.bill-amount-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  border: 1px solid transparent;
  padding: 0 2px;
}

.bill-amount-display strong {
  font-size: 15px;
}

.icon-pencil {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
  padding: 0;
  font-size: 15px;
}

.bill-amount-input {
  display: none;
}

.bill-utility-row.editing .bill-amount-display {
  display: none;
}

.bill-utility-row.editing .bill-amount-input {
  display: block;
}

.bill-login-details {
  position: relative;
}

.bill-login-details summary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--accent-strong);
  font-weight: 800;
}

.bill-login-details div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  display: grid;
  width: min(680px, 70vw);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  box-shadow: var(--shadow-md);
}

.bill-space-apply {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
}

.bill-space-apply h4 {
  margin: 0 0 6px;
}

.bill-space-apply p {
  margin: 0;
  color: var(--muted);
}

.bill-space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.bill-space-grid label {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fafc;
}

.bill-space-grid small {
  display: block;
  color: var(--muted);
}

.bill-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.tenancy-page {
  display: grid;
  align-content: start;
  gap: 18px;
}

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

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

.tenancy-subnav button {
  border-radius: 999px;
  padding-inline: 14px;
}

.tenancy-section {
  animation: pageIn 180ms var(--ease);
}

.tenancy-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
}

.tenancy-overview-grid article {
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.tenancy-overview-grid span {
  color: var(--muted);
  font-weight: 800;
}

.tenancy-overview-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 32px;
}

.tenancy-flow span {
  border: 1px solid rgba(8, 122, 143, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent);
  font-weight: 800;
  padding: 7px 10px;
}

.tenancy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tenancy-card {
  display: grid;
  align-content: start;
  overflow: hidden;
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
}

.tenancy-card.wide {
  grid-column: 1 / -1;
}

.tenancy-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.tenancy-card-header h3 {
  font-size: 20px;
}

.tenancy-form {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.tenancy-form input,
.tenancy-form select,
.space-form input,
.space-form select {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
}

.property-editor {
  grid-template-columns: minmax(100px, 0.65fr) minmax(180px, 1.5fr) minmax(110px, 0.7fr) minmax(160px, 1fr) minmax(160px, 1fr) auto;
  align-items: center;
}

.tenancy-list {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}

.tenancy-mini,
.tenancy-property-card,
.ast-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(248, 250, 251, 0.84);
  padding: 13px;
}

.record-card,
.record-form {
  display: grid;
  gap: 12px;
}

.record-form {
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  align-items: end;
}

.record-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.record-form input,
.record-form select {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
}

.record-title {
  display: grid;
  align-self: stretch;
  gap: 4px;
}

.record-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.property-record-form,
.ast-record-form,
.space-record-form {
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}

.tenancy-mini {
  display: grid;
  gap: 3px;
}

.tenancy-mini strong,
.tenancy-property-head strong,
.ast-head strong {
  font-size: 16px;
}

.tenancy-mini small,
.tenancy-property-head small {
  color: var(--muted);
}

.property-stack {
  gap: 14px;
}

.tenancy-property-card,
.ast-card {
  display: grid;
  gap: 12px;
}

.tenancy-property-head,
.ast-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.space-chip {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.space-chip span,
.space-chip small {
  color: var(--muted);
}

.space-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) auto;
  gap: 8px;
}

.space-form button {
  grid-column: auto;
}

.ast-field-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ast-field-grid span {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.ast-field-grid .ready {
  background: #dcf4e8;
  color: #11683f;
}

.ast-field-grid .missing {
  background: #fff3d9;
  color: #855900;
}

.ast-field-grid .warning {
  background: #e8f6fb;
  color: #075f70;
}

.ast-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.ast-summary div {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.ast-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.ast-summary dd {
  margin: 4px 0 0;
  font-weight: 750;
}

.compact-empty {
  margin: 0;
  max-width: none;
  box-shadow: none;
}

.review-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.module-control-row {
  position: relative;
  z-index: 8;
  display: grid;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.86);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(14px);
}

.review-module-controls {
  grid-template-columns: minmax(0, 390px) minmax(0, 1fr) auto;
  gap: 18px;
  padding: 7px 18px 7px 16px;
}

.review-module-controls #filters {
  justify-self: end;
}

.review-batch-controls {
  display: flex;
  gap: 8px;
  justify-self: end;
}

.spareroom-module-controls {
  grid-template-columns: minmax(0, 1fr);
  padding: 7px 18px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(310px, 390px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  animation: pageIn 180ms var(--ease);
}

.sidebar,
.spareroom-sidebar {
  min-width: 0;
  min-height: 0;
  border-right: 1px solid rgba(220, 227, 233, 0.86);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.search-row,
.spareroom-filters,
.spareroom-import {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.search-row input,
.search-row select,
.spareroom-filters input,
.spareroom-filters select,
.spareroom-import input,
.spareroom-fields input,
.spareroom-thread input,
.spareroom-thread select,
.spareroom-thread textarea,
.add-room-card input,
.room-form input,
.room-form select,
.contact-row input,
.contact-row select,
.add-contact-row input,
.add-contact-row select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
}

.compact-controls {
  align-items: center;
}

.review-controls {
  grid-template-columns: 42px minmax(0, 1fr) 42px auto;
  gap: 8px;
  border: 0;
  padding: 0;
}

.spareroom-header-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  justify-content: start;
}

.toolbar-search {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  transition:
    width 180ms var(--ease),
    border-color 140ms var(--ease),
    background 140ms var(--ease),
    box-shadow 140ms var(--ease);
}

.toolbar-search.is-open,
.toolbar-search:focus-within {
  z-index: 6;
  width: min(220px, calc(100vw - 32px));
  border-color: rgba(8, 122, 143, 0.42);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.spareroom-filters .toolbar-search {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.spareroom-filters .toolbar-search.is-open,
.spareroom-filters .toolbar-search:focus-within {
  transform: none;
}

.spareroom-filters .status-filter-control {
  grid-column: 2;
  grid-row: 1;
}

.toolbar-search input {
  width: 176px;
  min-height: 40px;
  border: 0;
  background: transparent;
  opacity: 0;
  outline: 0;
  padding: 8px 10px 8px 0;
  transition: opacity 120ms var(--ease);
}

.toolbar-search input:focus {
  border: 0;
  box-shadow: none;
}

.toolbar-search.is-open input,
.toolbar-search:focus-within input {
  opacity: 1;
}

.icon-control {
  position: relative;
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  place-items: center;
  border-radius: 12px;
  padding: 0;
}

.search-toggle {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.search-toggle:hover:not(:disabled) {
  border-color: transparent;
  background: rgba(232, 247, 250, 0.9);
  box-shadow: none;
  transform: none;
}

.search-toggle::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-1px, -1px);
}

.search-toggle::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(7px, 8px) rotate(45deg);
}

.toolbar-select {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  transition:
    border-color 140ms var(--ease),
    background 140ms var(--ease),
    box-shadow 140ms var(--ease);
}

.toolbar-select:focus-within,
.toolbar-select:hover {
  border-color: rgba(8, 122, 143, 0.34);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.toolbar-select > span,
.custom-select-kicker {
  padding-left: 12px;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.toolbar-select select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  min-height: 40px;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 8px 28px 8px 9px;
}

.status-filter-control {
  min-width: 176px;
}

.custom-select-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  height: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  padding: 0 12px 0 0;
}

.custom-select-button:hover:not(:disabled) {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.custom-select-button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.76;
}

#roomFilterLabel,
#spareroomStatusLabel {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auto-send-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  min-width: 72px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  font-size: 12px;
  font-weight: 860;
  padding: 0 11px;
  white-space: nowrap;
  transition:
    border-color 140ms var(--ease),
    background 140ms var(--ease),
    box-shadow 140ms var(--ease),
    color 140ms var(--ease);
}

.auto-send-pill:hover,
.auto-send-pill:focus-within {
  border-color: rgba(8, 122, 143, 0.34);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  color: var(--accent-strong);
}

.auto-send-pill input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.custom-select-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  width: min(260px, 80vw);
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(203, 213, 224, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 46px rgba(20, 32, 42, 0.18);
  padding: 6px;
  animation: menuIn 130ms var(--ease);
}

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}

.custom-select-option:hover:not(:disabled),
.custom-select-option.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: none;
  transform: none;
}

.custom-select-option.active::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.select-visible-control {
  font-size: 0;
}

.select-visible-control::before,
.select-visible-control::after {
  content: "";
  position: absolute;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.select-visible-control::before {
  width: 15px;
  height: 15px;
  transform: translate(-4px, -4px);
}

.select-visible-control::after {
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255, 0.74);
  transform: translate(5px, 5px);
}

.chat-list,
.spareroom-lead-list {
  min-height: 0;
  overflow: auto;
  scroll-behavior: auto;
}

.chat-row {
  content-visibility: auto;
  contain-intrinsic-size: 92px;
  display: grid;
  grid-template-columns: 42px 42px minmax(0, 1fr);
  align-items: start;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  transition:
    background 140ms var(--ease),
    box-shadow 140ms var(--ease);
}

.chat-row:hover,
.chat-row.selected {
  background: rgba(232, 247, 250, 0.88);
}

.chat-row.selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.select-chat {
  display: grid;
  align-items: start;
  justify-items: center;
  padding-top: 18px;
}

.chat-item {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 13px 14px 13px 0;
  text-align: left;
}

.chat-item:hover {
  box-shadow: none;
  transform: none;
}

.avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, #e3f2f5, #d4e7ec);
  color: var(--accent);
  font-weight: 800;
  object-fit: cover;
}

.clickable-avatar {
  cursor: zoom-in;
}

.list-avatar {
  width: 34px;
  height: 34px;
  margin-top: 13px;
  font-size: 12px;
}

.header-avatar {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.chat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-weight: 750;
}

.chat-title span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge,
.status-pill,
.draft-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}

.badge {
  background: var(--line-soft);
  color: #52606f;
}

.status-pill {
  background: #eef2f4;
  color: #52606f;
}

.status-pill.needs_review {
  background: #fff3d9;
  color: #855900;
}

.status-pill.replied {
  background: #dcf4e8;
  color: #11683f;
}

.status-pill.sent_to_owner {
  background: #e3efff;
  color: #245a9e;
}

.status-pill.drafted {
  background: #eef2f4;
  color: #52606f;
}

.status-pill.waiting_whatsapp {
  background: #fff1d8;
  color: #8a5500;
}

.status-pill.linked_whatsapp {
  background: #dcf4e8;
  color: #11683f;
}

.snippet {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.list-more,
.older-messages-note {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.list-more {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-soft);
}

.detail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

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

.connect {
  max-width: 440px;
  margin: 22px;
  color: var(--text);
}

.connect-card,
.empty-card,
.settings-panel,
.metric-grid article,
.recent-item,
.add-room-card,
.room-card,
.spareroom-detail-header {
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.connect-card {
  padding: 16px;
}

.connect-card img {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  margin-top: 12px;
  border-radius: var(--radius-sm);
}

.empty-card {
  max-width: 520px;
  margin: 22px;
  border-style: dashed;
  padding: 24px;
}

.property-form {
  display: grid;
  grid-template-columns: minmax(110px, 0.5fr) minmax(180px, 1.5fr) minmax(160px, 1fr) auto;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
}

.property-list,
.property-task-list,
.property-group-list {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.property-card,
.property-task,
.property-group-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  padding: 14px;
}

.property-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
  gap: 14px;
}

.property-card.is-saving {
  opacity: 0.72;
}

.property-card strong,
.property-task h3 {
  color: var(--ink);
  font-size: 18px;
}

.property-card p,
.property-task p {
  margin-top: 5px;
  line-height: 1.45;
}

.property-card [data-delete-property] {
  margin-top: 12px;
  width: fit-content;
}

button.danger,
.danger {
  border-color: rgba(190, 24, 93, 0.26);
  color: #9f1239;
}

button.ghost,
.ghost {
  background: #ffffff;
}

.property-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.property-card dl div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
}

.property-card dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.property-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.property-card dd select {
  width: 100%;
  margin-bottom: 5px;
}

.property-card dd small {
  color: var(--muted);
}

.property-tasks-panel,
.property-groups-panel {
  margin-top: 16px;
}

.property-task,
.property-group-card {
  display: grid;
  gap: 8px;
}

.property-task > div {
  display: flex;
  gap: 6px;
}

.property-task button,
.property-group-card button {
  justify-self: start;
}

.property-group-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.property-group-card p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.property-group-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.property-group-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tenant-support-page {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(8, 122, 143, 0.06), transparent 34%),
    linear-gradient(180deg, #f8fafb 0%, #eef3f5 100%);
}

.tenant-support-shell {
  display: grid;
  grid-template-columns: minmax(270px, 360px) minmax(420px, 1fr);
  grid-template-areas: "properties workspace";
  gap: 16px;
  height: 100%;
  padding-top: 0;
  min-height: 0;
  max-width: 1760px;
  margin: 0 auto;
}

.tenant-support-sidebar,
.tenant-property-groups,
.tenant-support-detail,
.tenant-property-workspace,
.tenant-support-tasks,
.tenant-action-panel {
  min-height: 0;
  border: 1px solid rgba(203, 215, 224, 0.88);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tenant-support-sidebar,
.tenant-property-groups {
  grid-area: properties;
}

.tenant-support-detail,
.tenant-property-workspace {
  grid-area: workspace;
}

.tenant-support-tasks,
.tenant-action-panel {
  grid-area: actions;
}

.tenant-support-sidebar,
.tenant-property-groups,
.tenant-support-tasks,
.tenant-action-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.tenant-support-tasks,
.tenant-action-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.tenant-support-intro,
.tenant-property-groups-head,
.tenant-task-head,
.tenant-action-panel-head,
.tenant-detail-header,
.tenant-workspace-head {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 251, 0.88));
}

.tenant-support-sidebar .tenant-support-intro {
  padding: 12px 16px;
}

.tenant-support-sidebar .tenant-support-intro p {
  display: none;
}

.tenant-support-intro h2,
.tenant-property-groups-head h2,
.tenant-task-head h2,
.tenant-action-panel-head h2,
.tenant-detail-header h2,
.tenant-workspace-head h2 {
  margin-top: 3px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.15;
}

.tenant-support-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(104px, 126px);
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
  background: rgba(255, 255, 255, 0.72);
}

.tenant-support-controls input,
.tenant-support-controls select {
  min-width: 0;
  height: 38px;
}

.tenant-group-list,
.tenant-property-list,
.tenant-task-list,
.tenant-action-list {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.tenant-group-card,
.tenant-property-card {
  position: relative;
  display: grid;
  gap: 8px;
  border-color: rgba(203, 215, 224, 0.92);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(8, 122, 143, 0.10), transparent 5px),
    #ffffff;
  cursor: pointer;
  transition:
    border-color 140ms var(--ease),
    box-shadow 140ms var(--ease),
    transform 140ms var(--ease),
    background 140ms var(--ease);
}

.tenant-group-card:hover,
.tenant-property-card:hover {
  border-color: rgba(8, 122, 143, 0.26);
  box-shadow: 0 12px 30px rgba(20, 32, 42, 0.08);
  transform: translateY(-1px);
}

.tenant-group-card strong,
.tenant-property-card strong {
  color: var(--text);
  line-height: 1.2;
}

.tenant-support-page .tenant-group-card strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.tenant-group-card p,
.tenant-property-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #586574;
  line-height: 1.42;
}

.tenant-group-card small,
.tenant-property-card small,
.tenant-property-card .tenant-property-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.tenant-group-card.selected,
.tenant-group-card.active,
.tenant-property-card.selected,
.tenant-property-card.active {
  border-color: rgba(8, 122, 143, 0.42);
  background:
    linear-gradient(90deg, var(--accent), var(--accent) 5px, transparent 5px),
    linear-gradient(135deg, #ffffff, #edf9fb);
  box-shadow: 0 14px 34px rgba(8, 122, 143, 0.16);
}

.tenant-support-page .tenant-support-group-section {
  display: grid;
  gap: 10px;
}

.tenant-direct-list {
  align-content: start;
}

.tenant-direct-card {
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-direct-card button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  padding: 10px;
  text-align: left;
}

.tenant-direct-card strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.tenant-direct-card p {
  display: -webkit-box;
  margin: 5px 0 4px;
  overflow: hidden;
  color: #52606d;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

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

.tenant-direct-card.selected {
  border-color: rgba(8, 122, 143, 0.42);
  background:
    linear-gradient(90deg, var(--accent), var(--accent) 5px, transparent 5px),
    linear-gradient(135deg, #ffffff, #edf9fb);
}

.status-pill.tenant {
  border: 1px solid rgba(8, 122, 143, 0.16);
  background: #eaf8fb;
  color: #075f70;
}

.tenant-status-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tenant-support-section-bar {
  position: relative;
  z-index: 18;
  border-bottom: 1px solid var(--line);
  background: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(12px);
  padding: 7px 14px;
  min-height: 47px;
}

.tenant-support-section-bar.hidden {
  display: none;
}

.tenant-support-section-tabs {
  display: flex;
  gap: 6px;
  overflow: visible;
  max-width: 100%;
  padding: 0;
  scrollbar-width: thin;
}

.tenant-support-section-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  background: #ffffff;
  color: #52616f;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.tenant-support-section-tabs button.active {
  border-color: rgba(8, 122, 143, 0.34);
  background: #e8f8fb;
  color: #075f70;
}

.tenant-support-section-tabs em {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(231, 236, 241, 0.95);
  color: #697586;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.tenant-support-section-tabs button.active em {
  background: rgba(8, 122, 143, 0.14);
  color: #075f70;
}

.tenant-section-more {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border: 1px solid rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  background: #ffffff;
  color: #52616f;
  font-size: 12px;
  font-weight: 850;
  padding: 0 8px;
}

.tenant-section-more-wrap {
  position: relative;
  flex: 0 0 auto;
  display: none;
}

.tenant-section-more.active {
  border-color: rgba(8, 122, 143, 0.34);
  background: #e8f8fb;
  color: #075f70;
}

.tenant-section-more-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 80;
  display: grid;
  min-width: 230px;
  max-width: min(320px, calc(100vw - 24px));
  gap: 4px;
  border: 1px solid rgba(203, 215, 224, 0.96);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  padding: 6px;
}

.tenant-section-more-menu.hidden {
  display: none;
}

.tenant-section-more-menu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-height: 36px;
  justify-content: stretch;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #24313d;
  padding: 7px 9px;
  text-align: left;
}

.tenant-section-more-menu button:hover,
.tenant-section-more-menu button.active {
  background: #e8f8fb;
  color: #075f70;
}

.tenant-section-more-menu button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-more,
.tenancy-subnav-more {
  display: none;
}

.tenant-support-page .tenant-group-card {
  align-items: start;
  gap: 10px;
}

.tenant-support-page .tenant-group-card-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.tenant-support-page .tenant-group-card-tools {
  display: grid;
  gap: 8px;
}

.tenant-support-page .tenant-group-card-tools label {
  display: grid;
  gap: 4px;
  color: #697586;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tenant-support-page .tenant-group-card-tools select,
.tenant-support-page .tenant-group-card-tools input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

.tenant-detail-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

.tenant-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.tenant-detail-header p,
.tenant-workspace-head p {
  margin-top: 4px;
  color: #5c6875;
}

.tenant-detail-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
  background: #ffffff;
}

.tenant-detail-meta span {
  min-width: 0;
  border: 1px solid rgba(220, 227, 233, 0.86);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tenant-detail-meta strong {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.tenant-detail-meta em {
  display: block;
  color: var(--text);
  font-style: normal;
}

.tenant-link-form {
  display: grid;
  grid-template-columns: minmax(90px, 0.72fr) minmax(160px, 1.3fr) minmax(104px, 0.45fr) auto;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
  background: #fbfcfd;
}

.tenant-message-panel {
  min-height: 0;
  overflow: hidden;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(248, 250, 251, 0.95), rgba(255, 255, 255, 0.86)),
    repeating-linear-gradient(0deg, transparent 0, transparent 31px, rgba(220, 227, 233, 0.32) 32px);
}

.tenant-detail-card .tenant-message-panel {
  min-height: 220px;
}

.tenant-message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.tenant-message {
  max-width: 78%;
  border: 1px solid rgba(220, 227, 233, 0.9);
  border-radius: 16px;
  padding: 11px 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(20, 32, 42, 0.06);
  overflow-wrap: anywhere;
}

.tenant-message.admin,
.tenant-message.staff,
.tenant-message.out {
  align-self: flex-end;
  border-color: rgba(8, 122, 143, 0.36);
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, #dff5fa, #f5fcfd);
  box-shadow: 0 10px 28px rgba(8, 122, 143, 0.11);
}

.tenant-message.tenant,
.tenant-message.in {
  align-self: flex-start;
  border-color: rgba(220, 227, 233, 0.96);
  border-bottom-left-radius: 5px;
  background:
    linear-gradient(90deg, rgba(184, 117, 3, 0.12), transparent 4px),
    #ffffff;
}

.tenant-message > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 12px;
}

.tenant-message > strong em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-style: normal;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  padding: 2px 7px;
  text-transform: uppercase;
}

.tenant-message.admin > strong em,
.tenant-message.staff > strong em,
.tenant-message.out > strong em {
  background: #cceff8;
  color: var(--accent-strong);
}

.tenant-message.tenant > strong em,
.tenant-message.in > strong em {
  background: #fff2d7;
  color: #8a5a00;
}

.tenant-message p {
  white-space: pre-wrap;
  color: var(--text);
}

.tenant-message a {
  color: var(--accent-strong);
  font-weight: 750;
}

.tenant-media-link {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
  text-align: left;
}

.tenant-media-link img {
  display: block;
  max-width: min(320px, 100%);
  max-height: 260px;
  border-radius: 12px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.tenant-media-link.video {
  position: relative;
}

.tenant-media-link.video video {
  display: block;
  max-width: min(320px, 100%);
  max-height: 260px;
  border-radius: 12px;
  border: 1px solid var(--line);
  object-fit: cover;
}

.tenant-media-link.video span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  color: #ffffff;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.tenant-file-link {
  display: inline-flex;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
}

.tenant-message small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.tenant-message.admin small,
.tenant-message.staff small,
.tenant-message.out small {
  color: var(--accent-strong);
}

.tenant-reply-form {
  display: grid;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(237, 241, 245, 0.96);
  background: #fff;
}

.tenant-reply-form textarea {
  min-height: 76px;
  resize: vertical;
}

.tenant-reply-form input[type="file"] {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 9px;
  background: var(--surface-soft);
}

.tenant-reply-form > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tenant-workspace-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
  background: #ffffff;
}

.tenant-workspace-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  border-radius: 999px;
  padding-inline: 13px;
}

.tenant-action-panel .property-task,
.tenant-support-tasks .property-task,
.tenant-action-item {
  border-color: rgba(203, 215, 224, 0.92);
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff, #fbfcfd);
  box-shadow: none;
}

.tenant-action-panel .property-task h3,
.tenant-support-tasks .property-task h3,
.tenant-action-item h3 {
  color: var(--text);
  font-size: 15px;
}

.tenant-action-panel .property-task small,
.tenant-support-tasks .property-task small,
.tenant-action-item small {
  color: var(--muted);
  font-weight: 650;
}

.tenant-task-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.tenant-support-page {
  padding: 16px;
  background:
    linear-gradient(180deg, #f6f8fa 0%, #edf2f5 100%);
}

.tenant-support-shell {
  grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
  gap: 12px;
}

.tenant-support-sidebar,
.tenant-property-groups,
.tenant-support-detail,
.tenant-property-workspace,
.tenant-support-tasks,
.tenant-action-panel {
  border-color: rgba(214, 223, 230, 0.9);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 32, 42, 0.04), 0 12px 32px rgba(20, 32, 42, 0.06);
}

.tenant-support-intro,
.tenant-property-groups-head,
.tenant-task-head,
.tenant-action-panel-head,
.tenant-detail-header,
.tenant-workspace-head {
  min-height: 0;
  padding: 12px 14px;
  background: #ffffff;
}

.tenant-support-intro h2,
.tenant-property-groups-head h2,
.tenant-task-head h2,
.tenant-action-panel-head h2,
.tenant-detail-header h2,
.tenant-workspace-head h2 {
  margin-top: 1px;
  font-size: 17px;
  line-height: 1.2;
}

.tenant-support-intro p,
.tenant-detail-header p,
.tenant-workspace-head p {
  margin-top: 2px;
  font-size: 12px;
}

.tenant-support-controls {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 6px;
  padding: 8px;
  background: #f8fafb;
}

.tenant-support-controls input,
.tenant-support-controls select {
  height: 34px;
  border-radius: 8px;
  font-size: 13px;
}

.tenant-group-list,
.tenant-property-list,
.tenant-task-list,
.tenant-action-list {
  scrollbar-color: rgba(138, 151, 165, 0.42) transparent;
  scrollbar-width: thin;
}

.tenant-group-list::-webkit-scrollbar,
.tenant-property-list::-webkit-scrollbar,
.tenant-task-list::-webkit-scrollbar,
.tenant-action-list::-webkit-scrollbar,
.tenant-message-list::-webkit-scrollbar,
.tenant-workspace-tabs::-webkit-scrollbar,
.tenant-property-nav-groups::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.tenant-group-list::-webkit-scrollbar-thumb,
.tenant-property-list::-webkit-scrollbar-thumb,
.tenant-task-list::-webkit-scrollbar-thumb,
.tenant-action-list::-webkit-scrollbar-thumb,
.tenant-message-list::-webkit-scrollbar-thumb,
.tenant-workspace-tabs::-webkit-scrollbar-thumb,
.tenant-property-nav-groups::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(138, 151, 165, 0.42);
  background-clip: padding-box;
}

.tenant-group-list,
.tenant-property-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
}

.tenant-group-card,
.tenant-property-card,
.tenant-property-nav-item {
  width: 100%;
  min-height: 0;
  border-radius: 9px;
  padding: 10px;
  text-align: left;
  background: #ffffff;
  box-shadow: none;
}

.tenant-property-nav-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.tenant-group-card p,
.tenant-property-card p {
  -webkit-line-clamp: 2;
  font-size: 12px;
}

.tenant-group-card.selected,
.tenant-group-card.active,
.tenant-property-card.selected,
.tenant-property-card.active {
  background:
    linear-gradient(90deg, var(--accent), var(--accent) 4px, transparent 4px),
    #f3fbfd;
  box-shadow: 0 8px 22px rgba(8, 122, 143, 0.12);
}

.tenant-property-nav-groups {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.tenant-property-nav-groups .status-pill,
.tenant-group-switcher .status-pill {
  flex: 0 0 auto;
}

.tenant-unlinked-groups {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
}

.tenant-unlinked-groups .tenant-support-intro {
  padding: 4px 2px;
  border: 0;
  background: transparent;
}

.tenant-unlinked-groups .property-group-actions {
  justify-content: flex-start;
}

.tenant-unlinked-groups .property-group-actions button,
.tenant-detail-header .property-group-actions button,
.tenant-reply-form button,
.tenant-action-panel .property-task button,
.tenant-support-tasks .property-task button {
  min-height: 32px;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12px;
}

.tenant-detail-card {
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  background: #f8fafb;
}

.tenant-detail-header {
  min-height: 68px;
  background: #ffffff;
}

.tenant-detail-header .property-group-actions {
  flex-wrap: nowrap;
}

.tenant-detail-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 10px;
  background: #fbfcfd;
}

.tenant-detail-meta span {
  border-radius: 8px;
  padding: 7px 9px;
  background: #ffffff;
  font-size: 12px;
}

.tenant-detail-meta strong {
  margin-bottom: 1px;
  font-size: 10px;
}

.tenant-group-switcher {
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: #ffffff;
  overflow-x: auto;
}

.tenant-group-switcher button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 32px;
  max-width: 220px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
}

.tenant-group-switcher button span {
  overflow: hidden;
  color: var(--muted);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-group-switcher button.active span,
.tenant-group-switcher button.active strong {
  color: #ffffff;
}

.tenant-workspace-tabs {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 7px 10px;
  background: #ffffff;
}

.tenant-workspace-tabs button {
  min-height: 30px;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
}

.tenant-link-form {
  grid-template-columns: minmax(110px, 0.8fr) minmax(180px, 1.4fr) minmax(120px, 0.7fr) auto;
  gap: 7px;
  padding: 9px 10px;
  background: #f3f8fa;
}

.tenant-link-form input,
.tenant-link-form select {
  height: 34px;
}

.tenant-message-panel {
  padding: 12px;
  background: #eef4f2;
}

.tenant-message-list {
  gap: 8px;
  padding: 2px 4px 10px;
  scrollbar-color: rgba(138, 151, 165, 0.42) transparent;
  scrollbar-width: thin;
}

.tenant-message {
  width: fit-content;
  min-width: min(220px, 78%);
  max-width: min(640px, 76%);
  border-radius: 14px;
  padding: 9px 11px;
  box-shadow: 0 2px 12px rgba(20, 32, 42, 0.06);
}

.tenant-message.admin,
.tenant-message.staff,
.tenant-message.out {
  background: #dcf7ee;
}

.tenant-message.tenant,
.tenant-message.in {
  background: #ffffff;
}

.tenant-message > strong {
  margin-bottom: 4px;
}

.tenant-message p {
  font-size: 13px;
  line-height: 1.45;
}

.tenant-reply-form {
  position: sticky;
  bottom: 0;
  gap: 7px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 24px rgba(20, 32, 42, 0.06);
}

.tenant-reply-form textarea {
  min-height: 54px;
  max-height: 150px;
  border-radius: 10px;
  padding: 10px;
}

.tenant-reply-form input[type="file"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px;
  background: #f8fafb;
  color: var(--muted);
  font-size: 12px;
}

.tenant-reply-form input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 10px;
  border: 1px solid rgba(8, 122, 143, 0.28);
  border-radius: 7px;
  background: #ffffff;
  color: var(--accent-strong);
  font: inherit;
  font-weight: 750;
  padding: 4px 9px;
}

.tenant-reply-form > div {
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.tenant-reply-form button.primary {
  margin-left: auto;
}

.tenant-action-panel .property-task,
.tenant-support-tasks .property-task,
.tenant-action-item {
  border-radius: 9px;
  padding: 10px;
}

.tenancy-page {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #f3f6fa;
}

.tenancy-nav {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: #ffffff;
  padding: 14px 10px;
}

.tenancy-nav-head {
  padding: 6px 6px 12px;
}

.tenancy-nav-head h2 {
  margin-top: 5px;
  font-size: 18px;
}

.tenancy-nav-head p {
  margin-top: 6px;
  font-size: 12px;
}

.tenancy-subnav {
  display: grid;
  gap: 3px;
}

.tenancy-subnav button {
  justify-content: flex-start;
  width: 100%;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  min-height: 34px;
  padding: 6px 10px;
  text-align: left;
}

.tenancy-subnav button:hover:not(:disabled) {
  background: var(--surface-soft);
  box-shadow: none;
}

.tenancy-subnav button.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: none;
}

.tenancy-workbench {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.tenancy-toolbar {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  padding: 16px 22px;
  backdrop-filter: blur(14px);
}

.tenancy-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.tenancy-toolbar h2 {
  margin-top: 3px;
}

.tenancy-toolbar-actions {
  display: flex;
  align-items: center;
  flex: 0 1 560px;
  gap: 10px;
  justify-content: flex-end;
  width: min(560px, 54vw);
}

.tenancy-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 280px;
}

.tenancy-search-field::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted-2);
  border-radius: 999px;
  pointer-events: none;
  transform: translateY(-56%);
}

.tenancy-search-field::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 50%;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: var(--muted-2);
  pointer-events: none;
  transform: translateY(4px) rotate(45deg);
  transform-origin: left center;
}

.tenancy-search-field:focus-within::before {
  border-color: var(--accent);
}

.tenancy-search-field:focus-within::after {
  background: var(--accent);
}

.tenancy-toolbar-actions input {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  background: #f8fbfc;
  padding: 9px 42px 9px 42px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.tenancy-toolbar-actions input::placeholder {
  color: #758392;
}

.tenancy-toolbar-actions input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.tenancy-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  min-width: 0;
  min-height: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  padding: 0;
  transform: translateY(-50%);
}

.tenancy-search-clear::before,
.tenancy-search-clear::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 13px;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--muted);
}

.tenancy-search-clear::before {
  transform: rotate(45deg);
}

.tenancy-search-clear::after {
  transform: rotate(-45deg);
}

.tenancy-search-clear:hover:not(:disabled) {
  background: rgba(102, 115, 129, 0.12);
  box-shadow: none;
  transform: translateY(-50%);
}

.tenancy-search-field.has-value input {
  background: #ffffff;
}

.tenancy-dashboard {
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.tenancy-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
}

.tenancy-overview-grid article,
.crm-panel,
.tenancy-record-detail,
.tenancy-list-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}

.tenancy-overview-grid article {
  padding: 16px;
}

.tenancy-overview-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.tenancy-overview-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.tenancy-overview-grid p {
  margin-top: 8px;
  font-size: 13px;
}

.tenancy-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: 14px;
  margin-top: 16px;
}

.crm-panel {
  padding: 16px;
}

.lead-module-logbook-panel {
  margin-top: 16px;
}

.lead-logbook-workspace {
  min-height: 0;
}

.lead-module-logbook-page-panel {
  margin-top: 0;
  min-height: min(740px, calc(100dvh - 190px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.lead-module-logbook-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(360px, 1fr);
  gap: 12px;
  min-height: 320px;
}

.lead-module-logbook-leads,
.lead-module-logbook {
  min-height: 0;
}

.lead-module-logbook-leads {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: min(640px, calc(100dvh - 270px));
  overflow: auto;
}

.lead-module-logbook-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 9px 10px;
  text-align: left;
}

.lead-module-logbook-lead.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lead-module-logbook-lead span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

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

.lead-module-logbook-lead small {
  color: var(--muted);
  font-size: 12px;
}

.lead-module-logbook {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.lead-module-logbook-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 11px 12px;
}

.lead-module-logbook-title div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lead-module-logbook-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.lead-module-logbook-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-module-logbook-title em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.lead-module-logbook-entries {
  display: grid;
  max-height: min(588px, calc(100dvh - 322px));
  overflow: auto;
}

.lead-module-logbook-entry {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--line-soft);
  padding: 10px 12px;
}

.lead-module-logbook-entry:first-child {
  border-top: 0;
}

.lead-module-logbook-entry > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.lead-module-logbook-entry strong {
  font-size: 12px;
}

.lead-module-logbook-entry small {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.lead-module-logbook-entry p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lead-module-logbook-entry.in {
  border-left: 3px solid #0891b2;
  background: #fff;
}

.lead-module-logbook-entry.out {
  border-left: 3px solid #20a67a;
  background: #f0fdf7;
}

.crm-panel-head,
.pipeline-row,
.mini-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.crm-panel-head {
  margin-bottom: 12px;
}

.crm-panel-head h3 {
  font-size: 16px;
}

.crm-panel-head span,
.pipeline-row span {
  color: var(--muted);
}

.pipeline-row {
  border-top: 1px solid var(--line-soft);
  padding: 12px 0;
  text-transform: capitalize;
}

.mini-record {
  width: 100%;
  margin-top: 8px;
  background: var(--surface-soft);
  text-align: left;
}

.tenancy-records {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 12px;
  transition: gap 180ms ease;
}

.tenancy-records.list-only {
  grid-template-columns: minmax(0, 1040px) minmax(0, 1fr);
  justify-content: center;
}

.tenancy-records.detail-open {
  animation: detailWorkspaceIn 220ms ease-out both;
}

.tenancy-records:has(.word-template-shell) {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 6px;
  padding: 6px 8px 8px 4px;
}

.tenancy-records:has(.word-template-shell) .tenancy-list-pane {
  overflow: hidden;
}

.tenancy-records:has(.word-template-shell) .tenancy-record-list {
  overflow: hidden;
}

.tenancy-records:has(.word-template-shell) .tenancy-list-summary {
  justify-content: center;
  padding: 8px 4px;
}

.tenancy-records:has(.word-template-shell) .tenancy-list-summary span,
.tenancy-records:has(.word-template-shell) .tenancy-row > span:not(.row-avatar),
.tenancy-records:has(.word-template-shell) .tenancy-row .row-extra,
.tenancy-records:has(.word-template-shell) .tenancy-row em {
  display: none;
}

.tenancy-records:has(.word-template-shell) .tenancy-row {
  grid-template-columns: 30px;
  justify-content: center;
  justify-items: center;
  min-height: 40px;
  overflow: hidden;
  padding: 6px 4px;
}

.tenancy-records:has(.word-template-shell) .tenancy-row:hover:not(:disabled),
.tenancy-records:has(.word-template-shell) .tenancy-row.selected {
  transform: none;
}

.tenancy-workbench:has(.word-template-shell) {
  grid-template-rows: auto minmax(0, 1fr);
}

.tenancy-workbench:has(.word-template-shell) .tenancy-toolbar {
  gap: 12px;
  padding: 10px 16px;
}

.tenancy-workbench:has(.word-template-shell) .tenancy-toolbar h2 {
  margin-top: 2px;
  font-size: 20px;
}

.tenancy-workbench:has(.word-template-shell) .tenancy-toolbar-actions {
  flex-basis: 460px;
  width: min(460px, 42vw);
}

.tenancy-list-pane,
.tenancy-record-detail {
  min-height: 0;
  overflow: auto;
  scroll-padding-bottom: 72px;
}

.tenancy-list-pane {
  align-self: start;
  max-height: calc(100dvh - 170px);
  transition: width 220ms ease-out, max-width 220ms ease-out, transform 220ms ease-out;
}

.tenancy-records.list-only .tenancy-list-pane {
  width: min(1040px, 100%);
  max-width: 1040px;
}

.tenancy-records.list-only .tenancy-record-detail {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(18px, 0, 0) scale(0.985);
  visibility: hidden;
}

.tenancy-record-detail {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: left center;
  transition: opacity 180ms ease-out, transform 220ms ease-out, visibility 0s linear 0s;
  will-change: opacity, transform;
}

.tenancy-list-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

.tenancy-list-summary strong {
  font-size: 18px;
}

.tenancy-list-summary span {
  color: var(--muted);
}

.tenancy-list-summary button {
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
}

.bulk-profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.bulk-profile-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.bulk-profile-actions button {
  margin-left: 0;
}

.tenancy-record-list {
  display: grid;
  padding-bottom: 72px;
}

.application-list-table {
  display: grid;
}

.tenancy-record-list .application-list-table,
.tenancy-record-list .deposit-protection-table,
.tenancy-record-list .gocardless-list-table,
.tenancy-record-list .gocardless-payout-table,
.tenancy-record-list .bills-tenancy-table,
.tenancy-record-list .ast-grouped-list {
  margin-bottom: -72px;
}

.tenancy-record-list .application-list-table::after,
.tenancy-record-list .deposit-protection-table::after,
.tenancy-record-list .gocardless-list-table::after,
.tenancy-record-list .gocardless-payout-table::after,
.tenancy-record-list .bills-tenancy-table::after,
.tenancy-record-list .ast-grouped-list::after {
  content: "";
  display: block;
  height: 72px;
}

.ast-grouped-list {
  display: grid;
}

.ast-date-group {
  display: grid;
  border-bottom: 1px solid var(--line);
}

.ast-date-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(248, 251, 253, 0.96);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  padding: 8px 14px;
  text-transform: uppercase;
}

.ast-date-group-head strong {
  color: var(--text);
  font-size: 12px;
}

.ast-date-group-head span {
  border-radius: 999px;
  background: var(--line-soft);
  padding: 3px 8px;
}

.deposit-protection-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
}

.deposit-protection-row em {
  justify-self: start;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 8px;
}

.deposit-protection-row em.ready {
  background: #e7f8ef;
  color: #24764f;
}

.deposit-protection-row em.missing {
  background: #fff3d8;
  color: #94610a;
}

.gocardless-list-table {
  display: grid;
}

.gocardless-payout-table,
.gocardless-payout-items-table {
  display: grid;
}

.gocardless-list-head,
.gocardless-table-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.85fr) minmax(260px, 1.6fr) minmax(110px, 0.65fr) minmax(150px, 0.8fr) minmax(130px, 0.7fr);
  gap: 14px;
  align-items: center;
}

.gocardless-payout-head,
.gocardless-payout-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(180px, 1.1fr) minmax(120px, 0.75fr);
  gap: 14px;
  align-items: center;
}

.gocardless-payout-head,
.gocardless-payout-items-head {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  padding: 9px 12px;
  text-transform: uppercase;
}

.gocardless-payout-row {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 12px;
  text-align: left;
}

.gocardless-payout-row:hover:not(:disabled),
.gocardless-payout-row.selected {
  background: #eef9fb;
  box-shadow: inset 3px 0 0 var(--accent);
  transform: translateX(2px);
}

.gocardless-payout-row em,
.gocardless-payout-item-row em {
  justify-self: start;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 8px;
}

.gocardless-payout-items-table {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
}

.gocardless-payout-items-head,
.gocardless-payout-item-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) minmax(90px, 0.55fr) minmax(110px, 0.65fr) minmax(120px, 0.75fr) minmax(130px, 0.8fr);
  gap: 12px;
  align-items: center;
}

.gocardless-payout-item-row {
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 12px;
}

.gocardless-payout-item-row:last-child {
  border-bottom: 0;
}

.gocardless-payout-item-row span {
  display: grid;
  min-width: 0;
}

.gocardless-payout-item-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gocardless-list-head {
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
}

.gocardless-list-head button {
  justify-content: flex-start;
  min-height: 28px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

.gocardless-list-head button:hover:not(:disabled),
.gocardless-list-head button.active {
  color: var(--accent-strong);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.gocardless-account-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 12px 14px 6px;
  color: var(--accent-strong);
  font-size: 12px;
  justify-content: flex-start;
  text-transform: uppercase;
  background: #ffffff;
  box-shadow: none;
}

.gocardless-account-group:hover:not(:disabled) {
  background: #f8fafc;
  box-shadow: none;
  transform: none;
}

.gocardless-account-group span {
  font-size: 16px;
  line-height: 1;
}

.gocardless-account-group em {
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-style: normal;
  padding: 2px 7px;
}

.gocardless-table-row {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px 12px;
  text-align: left;
  transition: background 140ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gocardless-table-row:hover:not(:disabled),
.gocardless-table-row.selected {
  background: #eef9fb;
  box-shadow: inset 3px 0 0 var(--accent);
  transform: translateX(2px);
}

.gocardless-table-row span,
.gocardless-table-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gocardless-table-row span {
  display: grid;
  gap: 2px;
}

.gocardless-table-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
}

.gocardless-table-row em {
  justify-self: start;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 4px 8px;
}

.application-list-head,
.application-table-row {
  display: grid;
  grid-template-columns: 52px minmax(170px, 1.25fr) minmax(90px, 0.5fr) minmax(220px, 1.35fr) minmax(120px, 0.65fr) minmax(90px, 0.5fr) minmax(110px, 0.6fr);
  gap: 12px;
  align-items: center;
}

.application-list-head {
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
}

.application-list-head button {
  display: block;
  width: 100%;
  justify-content: flex-start;
  justify-self: stretch;
  min-height: 28px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

.application-list-head button span {
  display: block;
  width: 100%;
  text-align: left;
}

.application-list-head button:hover:not(:disabled),
.application-list-head button.active {
  color: var(--accent-strong);
  background: transparent;
  box-shadow: none;
  transform: none;
}

.application-table-row {
  content-visibility: auto;
  contain-intrinsic-size: 58px;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 10px 12px;
  text-align: left;
  transition: background 140ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.application-table-row:hover,
.application-table-row.selected,
.application-table-row.bulk-selected {
  background: #eef9fb;
  box-shadow: inset 3px 0 0 var(--accent);
  transform: translateX(2px);
}

.application-row-marker {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.application-row-marker input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.list-head-select {
  align-self: stretch;
}

.list-head-select span {
  display: none;
}

.application-table-row span,
.application-table-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.application-table-row em {
  justify-self: start;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 3px 7px;
  text-transform: capitalize;
}

.tenancy-row {
  content-visibility: auto;
  contain-intrinsic-size: 62px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 9px 10px;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 160ms ease, transform 160ms ease;
  will-change: transform;
}

.tenancy-row:hover,
.tenancy-row.selected,
.tenancy-row.bulk-selected {
  background: #eef9fb;
  box-shadow: inset 3px 0 0 var(--accent);
  transform: translateX(2px);
}

.tenancy-records.list-only .tenancy-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 68px;
  border: 1px solid transparent;
  border-bottom-color: var(--line-soft);
  padding: 12px 14px;
}

.tenancy-records.list-only .tenancy-row.bulk-enabled {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

.tenancy-records.list-only .tenancy-row:hover {
  border-color: rgba(0, 133, 153, 0.16);
  border-radius: 12px;
}

.tenancy-row-select {
  align-self: center;
}

.row-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #edf3f7;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 850;
}

.row-avatar.large {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  font-size: 21px;
}

.tenancy-row strong,
.tenancy-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenancy-row small {
  margin-top: 3px;
  color: var(--muted);
}

.tenancy-row .row-extra {
  display: none;
}

.tenancy-records.list-only .tenancy-row .row-extra {
  display: block;
}

.tenancy-row em {
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  padding: 3px 7px;
  text-transform: capitalize;
}

.tenancy-record-detail {
  padding: 0;
}

.record-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  padding: 20px;
}

.record-detail-header > div {
  flex: 1;
  min-width: 0;
}

.record-delete-button {
  margin-left: auto;
  flex: 0 0 auto;
}

.record-back-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  padding: 0;
}

.record-back-button span {
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
  border-radius: 1px;
  transform: translateX(2px) rotate(45deg);
}

.record-back-button:hover:not(:disabled) {
  color: var(--accent-strong);
  background: #f4fbfc;
  transform: translateX(-1px);
}

.record-detail-header h3 {
  margin-top: 2px;
  font-size: 24px;
}

.record-detail-header p {
  margin-top: 4px;
}

.tenancy-record-detail:has(.word-template-shell) .record-detail-header {
  gap: 10px;
  padding: 12px 14px;
}

.tenancy-record-detail:has(.word-template-shell) .record-back-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.tenancy-record-detail:has(.word-template-shell) .row-avatar.large {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 17px;
}

.tenancy-record-detail:has(.word-template-shell) .record-detail-header h3 {
  font-size: 22px;
}

.tenancy-record-detail:has(.word-template-shell) .record-detail-header p {
  margin-top: 2px;
}

.record-section {
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.template-editor-section {
  padding: 6px;
}

.record-section h4 {
  margin: 0 0 14px;
  font-size: 15px;
}

.manual-instruction-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  color: var(--text);
  line-height: 1.5;
}

.manual-instruction-list li::marker {
  color: var(--accent-strong);
  font-weight: 800;
}

.manual-instruction-list strong {
  color: var(--text);
}

.crm-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px 14px;
}

.crm-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.crm-form-grid label.full {
  grid-column: 1 / -1;
}

.crm-form-grid .checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 8px 12px;
  min-width: 0;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.crm-form-grid .checkbox-group legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.crm-form-grid .checkbox-group .check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.crm-form-grid .checkbox-group input {
  width: auto;
  padding: 0;
}

.tenancy-import-form .import-help,
.tenancy-template-form .import-help,
.tenancy-import-form .import-result {
  color: var(--muted);
  font-size: 13px;
}

.tenancy-import-form .import-result {
  align-self: center;
  font-weight: 800;
}

.agreement-generate-form {
  margin-top: 12px;
  align-items: end;
}

.agreement-generate-form button[type="submit"] {
  grid-column: auto;
  justify-self: start;
}

.initial-payment-calculator {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfc;
}

.initial-payment-calculator > div:first-child {
  display: grid;
  gap: 4px;
}

.initial-payment-calculator small,
.initial-payment-result p {
  color: var(--muted);
  font-size: 12px;
}

.initial-payment-result {
  grid-column: 1 / -1;
}

.initial-payment-breakdown {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.initial-payment-breakdown > span {
  color: #087a8f;
  font-size: 12px;
  font-weight: 900;
}

.initial-payment-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.initial-payment-breakdown div.strong {
  border-top: 1px solid var(--line);
  padding-top: 5px;
  font-weight: 900;
}

.agreement-preview-shell {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #eef2f5;
  box-shadow: var(--shadow-sm);
}

.agreement-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.agreement-preview-toolbar > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.agreement-preview-toolbar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agreement-preview-toolbar span,
.agreement-preview-empty {
  color: var(--muted);
  font-size: 12px;
}

.agreement-preview-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.agreement-pack-override {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff8f2;
  color: #74410f;
  font-size: 12px;
  font-weight: 800;
}

.agreement-pack-override input {
  flex: 0 0 auto;
  margin-top: 1px;
}

.agreement-preview-frame {
  display: block;
  width: 100%;
  min-height: min(760px, 74vh);
  border: 0;
  background: #ffffff;
}

.agreement-preview-empty {
  padding: 16px;
}

.ast-signature-panel .progress-head {
  align-items: start;
}

.ast-signature-panel .progress-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

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

.gocardless-actions-panel form {
  display: grid;
  gap: 12px;
  max-width: 540px;
}

.gocardless-actions-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.gocardless-actions-panel input {
  max-width: 220px;
}

.gocardless-actions-panel select {
  max-width: 220px;
  min-height: 36px;
}

.gocardless-subscription-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
}

.gocardless-actions-panel .signature-actions {
  justify-content: flex-start;
}

.gocardless-actions-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.button-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  background: #ffffff;
}

.button-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.signature-request-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.signature-request-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfc;
}

.signature-request-card.signed {
  border-color: #b8e6dc;
  background: #f1fbf8;
}

.signature-request-card span,
.signature-request-card small,
.signature-request-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.signature-request-card span {
  color: #0b7285;
  font-weight: 900;
  text-transform: uppercase;
}

.signature-request-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-request-card button {
  justify-self: start;
  min-height: 32px;
  padding: 6px 10px;
}

.signature-progress-section .progress-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.signature-progress-bar {
  overflow: hidden;
  height: 10px;
  margin: 12px 0 16px;
  border-radius: 999px;
  background: #e5edf2;
}

.signature-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #087a8f;
}

.tenancy-pack-section .progress-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.tenancy-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.global-pack-grid {
  min-width: min(680px, 100%);
}

.tenancy-pack-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fbfc;
}

.tenancy-pack-card.expired,
.tenancy-pack-card.missing_expiry {
  border-color: #ffd1b8;
  background: #fff8f2;
}

.tenancy-pack-card-head,
.tenancy-pack-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tenancy-pack-card-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tenancy-pack-card-head small {
  max-width: 100%;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenancy-pack-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  background: #e9eef3;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.tenancy-pack-status.ok {
  background: #dcf4e8;
  color: #11683f;
}

.tenancy-pack-status.expiring_soon {
  background: #fff3d9;
  color: #855900;
}

.tenancy-pack-status.expired,
.tenancy-pack-status.missing,
.tenancy-pack-status.missing_expiry {
  background: #ffe4dd;
  color: #9f2d17;
}

.mini-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.mini-definition-grid div {
  display: grid;
  gap: 2px;
}

.mini-definition-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mini-definition-grid dd {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}

.tenancy-pack-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 120px);
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.tenancy-pack-upload label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.tenancy-pack-upload input {
  width: 100%;
  min-width: 0;
}

.tenancy-pack-file-picker {
  grid-column: 1 / -1;
}

.tenancy-pack-upload button[type="submit"] {
  width: 100%;
  min-height: 36px;
}

.tenancy-pack-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tenancy-pack-file-picker strong {
  display: block;
  width: 100%;
  min-height: 36px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  background: #ffffff;
  color: var(--ink);
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}

.tenancy-pack-file-picker strong::before {
  content: 'Upload document';
  display: inline-block;
  margin-right: 8px;
  color: #087a8f;
  font-weight: 900;
}

.tenancy-pack-settings-head {
  min-width: 210px;
}

.linked-space-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

.linked-space-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 78px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--ink);
  text-transform: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.linked-space-option.selected {
  border-color: rgba(8, 126, 148, 0.35);
  background: #eefbfc;
}

.linked-space-option:hover {
  border-color: rgba(8, 126, 148, 0.45);
  background: #f5fdff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.linked-space-option > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ast-space-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.linked-space-option span {
  font-size: 14px;
  font-weight: 800;
}

.linked-space-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.linked-space-option em {
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linked-space-option button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
}

.ast-space-manager {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfe;
}

.ast-space-instructions {
  display: grid;
  gap: 4px;
  margin-bottom: -2px;
}

.ast-space-instructions strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ast-space-instructions span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.crm-form-grid .ast-space-save {
  grid-column: 1 / -1;
  justify-self: start;
}

.crm-form-grid button[type="submit"] {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 34px;
  border-radius: 9px;
  padding: 7px 14px;
}

.compact-create {
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.compact-create button[type="submit"] {
  justify-self: end;
}

.agreement-email-action {
  margin-top: 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.agreement-email-action button {
  justify-self: end;
}

.related-list {
  display: grid;
  gap: 8px;
}

.related-list button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--surface-soft);
  text-align: left;
}

.related-list span {
  color: var(--muted);
}

.related-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.related-action-row > button:first-child {
  min-width: 0;
}

.compact-danger {
  min-height: 34px;
  padding: 7px 12px;
}

.crm-definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 24px;
  margin: 18px 0 0;
}

.crm-definition-grid div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
}

.crm-definition-grid dt {
  color: var(--muted);
}

.crm-definition-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.merge-field-hero {
  display: grid;
  gap: 8px;
}

.merge-field-hero span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.merge-field-hero h4 {
  margin: 0;
}

.merge-field-hero code,
.merge-alias-list code {
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 8px;
}

.merge-alias-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.merge-field-note,
.muted-inline {
  color: var(--muted);
}

.merge-field-note {
  margin: 0;
  line-height: 1.5;
}

.template-mapping-list {
  display: grid;
  gap: 10px;
}

.template-mapping-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.template-mapping-row strong,
.template-mapping-row small {
  display: block;
}

.template-mapping-row small {
  color: var(--muted);
}

.template-preview {
  max-height: 460px;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfd;
  color: var(--text);
  white-space: pre-wrap;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.template-editor-shell {
  height: calc(100dvh - 180px);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef2f5;
}

.writer-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.preserve-toolbar {
  justify-content: space-between;
}

.writer-title {
  display: grid;
  min-width: 230px;
  margin-right: 8px;
}

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

.writer-toolbar button {
  min-height: 30px;
  border-radius: 7px;
  padding: 5px 9px;
}

.template-word-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.writer-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  height: calc(100% - 47px);
  min-height: 0;
  overflow: hidden;
}

.word-template-shell .writer-workspace {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.writer-canvas {
  min-height: 0;
  overflow: auto;
  padding: 24px;
  background: #e8edf1;
}

.word-template-shell .writer-canvas {
  overflow: hidden;
  padding: 8px;
}

.writer-page {
  width: min(100%, 794px);
  min-height: 1122px;
  margin: 0 auto;
  padding: 72px 68px;
  border: 1px solid #cfd8df;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
}

.template-preview-frame {
  display: block;
  height: 1122px;
  padding: 0;
}

.word-template-shell .template-preview-frame {
  width: min(100%, 920px);
  max-width: 100%;
}

.pdf-html-template-shell .writer-canvas {
  padding: 10px;
}

.pdf-template-preview-frame {
  width: 100%;
  min-height: calc(100dvh - 250px);
  height: calc(100dvh - 250px);
  border: 1px solid #cfd8df;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.superdoc-editor-host {
  height: 100%;
  min-height: 0;
}

.propertyhub-superdoc-shell,
.propertyhub-superdoc,
.propertyhub-superdoc .superdoc-wrapper,
.propertyhub-superdoc .superdoc-editor-container {
  height: 100%;
  min-height: 0;
}

.propertyhub-superdoc-shell {
  overflow: hidden;
  border: 1px solid #cfd8df;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.propertyhub-superdoc .superdoc-toolbar-container {
  position: relative;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.propertyhub-superdoc .superdoc-toolbar-container::-webkit-scrollbar {
  height: 6px;
}

.propertyhub-superdoc .superdoc-toolbar-container::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.32);
  border-radius: 999px;
}

.propertyhub-superdoc .superdoc-editor-container {
  background: #e8edf1;
  overflow: hidden;
}

.propertyhub-superdoc .superdoc-toolbar {
  min-width: max-content;
}

.propertyhub-superdoc .superdoc,
.propertyhub-superdoc .superdoc--contained {
  height: 100%;
  min-height: 0;
}

.propertyhub-superdoc .superdoc__sub-document {
  display: flex;
  justify-content: center;
  overflow: auto;
  padding: 12px 18px 28px;
}

.propertyhub-superdoc .superdoc__document {
  width: fit-content !important;
  min-width: 816px;
  margin: 0 auto;
}

.propertyhub-superdoc .superdoc__layers {
  margin: 0 auto;
}

.propertyhub-superdoc .superdoc__right-sidebar,
.propertyhub-superdoc .right-sidebar,
.propertyhub-superdoc .floating-comments {
  display: none;
}

.superdoc-loading {
  display: grid;
  place-content: center;
  min-height: calc(100dvh - 230px);
  color: var(--muted);
}

.superdoc-empty-state {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: calc(100dvh - 230px);
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.superdoc-empty-state strong {
  color: var(--text);
}

.writer-page:focus {
  box-shadow: 0 0 0 4px rgba(8, 122, 143, 0.12), 0 18px 44px rgba(15, 23, 42, 0.12);
}

.readonly-word-preview {
  cursor: default;
}

.readonly-word-preview:focus {
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.writer-page table {
  max-width: 100%;
  border-collapse: collapse;
}

.writer-page td,
.writer-page th {
  padding: 4px 6px;
  border-bottom: 1px solid #d9e0e6;
}

.writer-side-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: #ffffff;
}

.writer-side-tabs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 8px;
}

.writer-side-tabs span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.field-palette-search {
  padding: 0 14px 10px;
}

.field-palette-search input {
  width: 100%;
  padding: 8px 10px;
}

.field-palette {
  min-height: 0;
  overflow: auto;
  padding: 0 14px 16px;
}

.field-palette-group {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.field-palette-group h5 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.field-palette-group button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 7px 9px;
  text-align: left;
}

.field-palette-group code {
  color: var(--accent-strong);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-palette-note {
  margin: 6px 14px 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.preserve-template-note {
  background: #f8fbfc;
}

.merge-chip {
  display: inline-block;
  border: 1px solid rgba(8, 122, 143, 0.28);
  border-radius: 6px;
  background: #e8f7fa;
  color: var(--accent-strong);
  font-weight: 800;
  padding: 1px 5px;
}

.smart-detection-panel summary {
  cursor: pointer;
  font-weight: 800;
}

.progress-section .ast-field-grid {
  margin-top: 10px;
}

.progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.progress-head strong {
  color: var(--accent-strong);
}

.application-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.application-workflow article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfc;
  padding: 12px;
}

.application-workflow article span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--muted);
  font-weight: 850;
}

.application-workflow article.done {
  border-color: rgba(45, 151, 91, 0.28);
  background: #eefaf2;
}

.application-workflow article.done span {
  background: #2d975b;
  color: white;
}

.application-workflow strong,
.application-workflow small {
  display: block;
}

.application-workflow small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

@keyframes detailWorkspaceIn {
  from {
    opacity: 0.96;
    transform: translate3d(10px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.detail-header {
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.86);
  background: rgba(248, 250, 251, 0.88);
  backdrop-filter: blur(14px);
}

.mobile-back {
  display: none;
}

.detail-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-left: auto;
}

.room-code-picker {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.room-code-picker span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.room-code-picker select {
  min-height: 38px;
  width: 100%;
  padding: 8px 10px;
}

.detail-controls button {
  min-height: 38px;
  margin: 0;
}

.lead-assignment-panel {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, 0.7fr) auto auto;
  flex: 1 1 100%;
  align-items: end;
  gap: 8px;
  margin-left: 66px;
}

.lead-assignment-panel label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.lead-assignment-panel span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.lead-assignment-panel input {
  min-height: 38px;
  width: 100%;
  padding: 8px 10px;
}

.lead-assignment-panel button {
  min-height: 38px;
  margin: 0;
  white-space: nowrap;
}

.property-actions {
  display: flex;
  flex: 1 1 100%;
  gap: 8px;
  margin-left: 72px;
}

.property-actions button {
  min-height: 34px;
  padding: 6px 10px;
}

.detail-header h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 21px;
  letter-spacing: 0;
}

.detail-header p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 18px 20px;
  scroll-behavior: smooth;
}

.lead-detail-panel,
.lead-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(292px, 360px);
  min-height: 0;
  overflow: hidden;
}

.lead-conversation,
.lead-conversation-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lead-progress-sidebar,
.lead-progress-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-left: 1px solid rgba(220, 227, 233, 0.9);
  background: #f7fafc;
  padding: 12px;
}

.lead-progress-header,
.lead-progress-panel header {
  display: grid;
  gap: 5px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.9);
}

.lead-progress-sidebar h3,
.lead-progress-panel h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.lead-progress-sidebar p,
.lead-progress-sidebar small,
.lead-progress-panel p,
.lead-progress-panel small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.lead-progress-sidebar p,
.lead-progress-panel p {
  white-space: pre-line;
}

.lead-progress-section {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(220, 227, 233, 0.9);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px 11px;
}

.lead-progress-section > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.lead-progress-section strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.lead-progress-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
  font-size: 12px;
}

.lead-progress-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.lead-progress-row span,
.lead-progress-row small {
  color: var(--muted);
  font-weight: 750;
}

.lead-progress-row strong,
.lead-progress-row p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lead-progress-reason,
.lead-progress-section.status-info,
.lead-progress-section.status-success,
.lead-progress-section.status-warning,
.lead-progress-section.status-warn,
.lead-progress-section.status-error,
.lead-progress-section.status-danger,
.lead-progress-section.risk-clear,
.lead-progress-section.risk-low,
.lead-progress-section.risk-medium,
.lead-progress-section.risk-high {
  border-left: 4px solid #0891b2;
}

.lead-progress-section.status-info,
.lead-progress-reason.info {
  border-left-color: #0891b2;
}

.lead-progress-section.status-success,
.lead-progress-section.risk-clear,
.lead-progress-section.risk-low {
  border-left-color: var(--success);
}

.lead-progress-reason.warning,
.lead-progress-reason.warn,
.lead-progress-section.status-warning,
.lead-progress-section.status-warn,
.lead-progress-section.risk-medium {
  border-left-color: #d97706;
}

.lead-progress-reason.error,
.lead-progress-reason.danger,
.lead-progress-section.status-error,
.lead-progress-section.status-danger,
.lead-progress-section.risk-high {
  border-left-color: #dc2626;
}

.lead-progress-list,
.lead-progress-comments,
.lead-progress-timeline {
  display: grid;
  gap: 7px;
}

.lead-progress-list article,
.lead-progress-comments article,
.lead-progress-timeline article {
  position: relative;
  display: grid;
  gap: 3px;
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  padding-top: 7px;
}

.lead-progress-list article:first-child,
.lead-progress-comments article:first-child,
.lead-progress-timeline article:first-child {
  border-top: 0;
  padding-top: 0;
}

.lead-progress-timeline article {
  padding-left: 14px;
}

.lead-progress-timeline article::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 1px;
  width: 7px;
  height: 7px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #0891b2;
  box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.22);
}

.lead-progress-timeline article.success::before,
.lead-progress-timeline article.done::before,
.lead-progress-timeline article.complete::before {
  background: var(--success);
  box-shadow: 0 0 0 1px rgba(19, 138, 85, 0.22);
}

.lead-progress-timeline article.warning::before,
.lead-progress-timeline article.warn::before {
  background: #d97706;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.22);
}

.lead-progress-timeline article.error::before,
.lead-progress-timeline article.danger::before,
.lead-progress-timeline article.blocked::before {
  background: #dc2626;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.22);
}

.lead-progress-timeline article.success strong,
.lead-progress-timeline article.done strong,
.lead-progress-timeline article.complete strong {
  color: #176f47;
}

.lead-progress-timeline article.warning strong,
.lead-progress-timeline article.warn strong {
  color: #9a3412;
}

.lead-progress-timeline article.error strong,
.lead-progress-timeline article.danger strong,
.lead-progress-timeline article.blocked strong {
  color: #9b3030;
}

.lead-progress-empty {
  border: 1px dashed rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  background: #fbfdff;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}

.lead-progress-comment-form,
.lead-progress-note-form {
  display: grid;
  gap: 7px;
}

.lead-progress-comment-form textarea,
.lead-progress-note-form textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  border: 1px solid rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 9px;
  color: var(--text);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.lead-progress-comment-form button,
.lead-progress-note-form button {
  justify-self: start;
  min-height: 32px;
  margin: 0;
  padding: 6px 10px;
}

@media (max-width: 1180px) {
  .lead-detail-panel,
  .lead-workspace {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .lead-conversation,
  .lead-conversation-column {
    min-height: 720px;
  }

  .lead-progress-sidebar,
  .lead-progress-panel {
    border-top: 1px solid rgba(220, 227, 233, 0.9);
    border-left: 0;
    overflow: visible;
  }
}

@media (max-width: 860px) {
  .lead-detail-panel,
  .lead-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }

  .lead-conversation,
  .lead-conversation-column {
    min-height: min(720px, calc(100dvh - 118px));
  }

  .lead-progress-sidebar,
  .lead-progress-panel {
    max-height: none;
    padding: 10px;
  }

  .lead-progress-section {
    padding: 9px 10px;
  }

  .lead-progress-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

.older-messages-note {
  align-self: center;
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-solid);
  padding: 6px 12px;
}

.message {
  max-width: min(680px, 82%);
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 14px 14px 14px 5px;
  background: var(--surface-solid);
  box-shadow: 0 1px 2px rgba(20, 32, 42, 0.04);
  padding: 11px 12px;
  text-align: left;
  overflow-wrap: anywhere;
  animation: messageIn 160ms var(--ease);
}

.message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-text a,
.tenant-message p a {
  color: #067790;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message-media {
  display: block;
  max-width: min(100%, 340px);
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid rgba(220, 227, 233, 0.9);
  border-radius: 13px;
  background: #f8fafb;
  cursor: zoom-in;
  padding: 0;
  text-align: left;
}

.message-media img,
.message-media.video video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
}

.message-media.file {
  padding: 10px 12px;
  color: var(--accent-strong);
  font-weight: 800;
  text-decoration: none;
}

.message-quote {
  background: rgba(255, 255, 255, .58);
  border-left: 3px solid #20a67a;
  border-radius: 8px;
  display: grid;
  gap: 2px;
  margin: 0 0 8px;
  max-width: 100%;
  padding: 7px 9px;
}

.message.in .message-quote {
  background: rgba(240, 245, 248, .86);
  border-left-color: #7f91a3;
}

.message-quote strong {
  color: #04778e;
  font-size: 12px;
  line-height: 1.25;
}

.message-quote span {
  color: #5d6b7a;
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.message-flags {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
}

.message-flags span {
  background: #ffffff;
  border: 1px solid rgba(220, 227, 233, .9);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(20, 32, 42, .08);
  font-size: 15px;
  line-height: 1;
  margin-bottom: -14px;
  margin-top: 6px;
  padding: 4px 7px;
}

.message.out {
  align-self: flex-end;
  border-color: rgba(19, 138, 85, 0.16);
  border-radius: 14px 14px 5px 14px;
  background: #e8f7ef;
}

.message p {
  margin-top: 9px;
  color: var(--muted-2);
  font-size: 12px;
}

.message-meta {
  align-items: center;
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.receipt-ticks {
  color: #718096;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
}

.receipt-ticks.read {
  color: #1e9be0;
}

.composer {
  margin: 0;
  padding: 10px 14px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(220, 227, 233, 0.86);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -14px 34px rgba(20, 32, 42, 0.08);
  backdrop-filter: blur(18px);
}

.composer-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.composer-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.composer h3 {
  font-size: 16px;
}

.draft-state {
  border: 1px solid #cfe0e4;
  background: var(--accent-soft);
  color: var(--accent);
}

.draft-editor {
  width: 100%;
  min-height: 92px;
  max-height: min(34dvh, 280px);
  overflow: auto;
  background: #fbfcfd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 13px 14px;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}

.draft-editor.loading {
  background:
    linear-gradient(90deg, transparent, rgba(8, 122, 143, 0.08), transparent),
    #fbfcfd;
  background-size: 220% 100%, auto;
  animation: draftLoading 1.1s linear infinite;
  color: var(--muted);
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 2px;
}

.reply-attachment-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.attachment-button {
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 22px;
  font-weight: 760;
  line-height: 1;
}

.more-menu {
  position: relative;
}

.more-button::after {
  content: "⌄";
  margin-left: 8px;
  color: var(--muted);
}

.more-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 18;
  display: grid;
  width: min(280px, calc(100vw - 28px));
  gap: 6px;
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-md);
  padding: 8px;
  transform-origin: bottom right;
  animation: menuIn 140ms var(--ease);
  backdrop-filter: blur(18px);
}

.more-panel button,
.more-panel select {
  width: 100%;
  text-align: left;
}

.more-panel button {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.more-panel button:hover {
  background: var(--accent-soft);
  box-shadow: none;
  transform: none;
}

.menu-section {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 0;
}

.menu-section > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0 8px;
  text-transform: uppercase;
}

.notice {
  min-width: 0;
  margin-left: auto;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.notice[data-tone="error"] {
  color: #9b3030;
}

.app-toast {
  position: fixed;
  z-index: 120;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100vw - 36px));
  border: 1px solid rgba(203, 213, 224, 0.92);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
  padding: 12px 14px;
  animation: cardIn 140ms var(--ease);
}

.app-toast[data-tone="error"] {
  border-color: rgba(180, 35, 24, 0.24);
  background: #fff7f6;
  color: #b42318;
}

.assistant-bubble {
  position: fixed;
  right: 20px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 125;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(8, 122, 143, 0.25);
  border-radius: 18px;
  background: #008899;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  padding: 0;
}

.assistant-bubble:hover:not(:disabled) {
  background: #007489;
  transform: translateY(-2px);
}

.assistant-panel {
  position: fixed;
  right: 20px;
  bottom: calc(152px + env(safe-area-inset-bottom));
  z-index: 125;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(430px, calc(100vw - 28px));
  height: min(640px, calc(100dvh - 150px));
  overflow: hidden;
  border: 1px solid rgba(203, 213, 224, 0.95);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.25);
}

.assistant-panel.expanded {
  right: 24px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: min(880px, calc(100vw - 48px));
  height: min(820px, calc(100dvh - 118px));
}

.assistant-panel.drag-over {
  border-color: rgba(0, 136, 153, 0.55);
  box-shadow: 0 24px 72px rgba(0, 136, 153, 0.24);
}

.assistant-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.assistant-panel header span {
  display: block;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.assistant-panel header h2 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.2;
}

.assistant-panel header button {
  min-width: 34px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.assistant-session-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 14px;
}

.assistant-session-bar select {
  flex: 1;
  min-width: 0;
}

.assistant-session-bar button {
  min-height: 34px;
  white-space: nowrap;
}

.assistant-window-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assistant-window-controls button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.assistant-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.assistant-message {
  max-width: 88%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  padding: 10px 12px;
}

.assistant-message-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.95);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 0 8px;
  margin-bottom: 8px;
}

.assistant-message-state.pending {
  border-color: rgba(8, 122, 143, 0.18);
  background: rgba(233, 248, 251, 0.96);
  color: var(--accent-strong);
}

.assistant-message-state.complete {
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(240, 253, 244, 0.96);
  color: #166534;
}

.assistant-message-state.note {
  border-color: rgba(245, 158, 11, 0.18);
  background: rgba(255, 251, 235, 0.96);
  color: #92400e;
}

.assistant-message.user {
  align-self: flex-end;
  border-color: rgba(8, 122, 143, 0.22);
  background: #e9f8fb;
}

.assistant-message.assistant {
  align-self: flex-start;
}

.assistant-panel.expanded .assistant-message.assistant {
  max-width: min(760px, 92%);
}

.assistant-message-body {
  display: grid;
  gap: 9px;
}

.assistant-message-body > * {
  margin: 0;
}

.assistant-message-body h3,
.assistant-message-body h4,
.assistant-message-body h5 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.25;
}

.assistant-message-body h3 {
  font-size: 17px;
}

.assistant-message-body ul,
.assistant-message-body ol {
  display: grid;
  gap: 6px;
  padding-left: 20px;
}

.assistant-message-body a {
  color: var(--accent-strong);
  font-weight: 800;
  text-decoration: none;
}

.assistant-message-body a:hover {
  text-decoration: underline;
}

.assistant-message-body code {
  border-radius: 5px;
  background: rgba(8, 122, 143, 0.1);
  color: var(--accent-strong);
  font-size: 0.92em;
  padding: 1px 4px;
}

.assistant-message-body pre {
  overflow: auto;
  border: 1px solid rgba(203, 213, 224, 0.9);
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  padding: 10px;
}

.assistant-message-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.assistant-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(203, 213, 224, 0.95);
  border-radius: 8px;
  background: #fff;
}

.assistant-table-wrap table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.35;
}

.assistant-table-wrap th,
.assistant-table-wrap td {
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}

.assistant-table-wrap th {
  background: #f1f7f8;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.assistant-table-wrap tr:last-child td {
  border-bottom: 0;
}

.assistant-action-card {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border: 1px solid rgba(8, 122, 143, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  padding: 10px;
}

.assistant-action-card strong {
  font-size: 13px;
}

.assistant-action-details {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.assistant-action-details p {
  margin: 0;
}

.assistant-action-details strong {
  margin-right: 6px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}

.assistant-action-card button {
  justify-self: start;
  min-height: 34px;
}

.assistant-pending-action {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 12px;
  background: #f8fbfc;
}

.assistant-pending-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(8, 122, 143, 0.16);
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.assistant-pending-action-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.assistant-pending-action-copy span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.assistant-pending-action-copy strong {
  font-size: 14px;
  line-height: 1.25;
}

.assistant-pending-action-card button {
  min-height: 36px;
  white-space: nowrap;
}

.assistant-attachments {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-top: 1px solid var(--line-soft);
  padding: 8px 12px;
}

.assistant-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 8px;
  white-space: nowrap;
}

.assistant-attachment-chip button {
  min-width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
}

.assistant-form {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px;
}

.assistant-form input[type="file"] {
  display: none;
}

.assistant-attach-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 24px;
  font-weight: 800;
}

.assistant-form textarea {
  min-height: 42px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 11px;
  font: inherit;
}

.assistant-form button {
  min-height: 40px;
}

.module-notification-banner {
  position: fixed;
  z-index: 130;
  top: 18px;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: min(640px, calc(100vw - 32px));
  border: 1px solid rgba(8, 122, 143, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.2);
  padding: 12px 14px;
  transform: translateX(-50%);
  animation: cardIn 140ms var(--ease);
}

.module-notification-banner span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.module-notification-banner strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-notification-banner p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-notification-banner button.icon {
  min-width: 36px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.metric-grid article {
  padding: 16px;
  animation: cardIn 200ms var(--ease);
}

.metric-grid span,
.recent-item small {
  color: var(--muted);
}

.metric-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 30px;
}

.settings-panel {
  overflow: hidden;
}

.dashboard-viewings-panel {
  margin-top: 18px;
}

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.settings-header.compact {
  padding: 0 0 12px;
  border-bottom: 0;
}

.spareroom-page {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.spareroom-topup-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 14px 0;
  padding: 12px 14px;
  border: 1px solid rgba(232, 156, 0, 0.34);
  border-radius: 8px;
  background: #fff8da;
  color: #473507;
  box-shadow: 0 10px 24px rgba(122, 89, 10, 0.08);
}

.spareroom-topup-notice.hidden {
  display: none;
}

.spareroom-topup-notice div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.spareroom-topup-notice strong {
  font-size: 14px;
}

.spareroom-topup-notice span {
  color: #6f570f;
  font-size: 13px;
  font-weight: 700;
}

.spareroom-topup-notice a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: #ff8a00;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 20px rgba(255, 138, 0, 0.2);
}

.emails-page {
  display: grid;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.emails-shell {
  display: grid;
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  border-top: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 251, 0.92)),
    var(--bg);
}

.emails-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-width: 0;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
}

.emails-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}

.emails-toolbar h2 {
  margin-top: 2px;
  font-size: 22px;
}

.emails-toolbar p {
  margin-top: 2px;
  font-size: 13px;
}

.emails-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 150px);
  gap: 8px;
  padding: 0 14px 10px;
}

.emails-controls input,
.emails-controls select {
  min-height: 40px;
  padding: 8px 10px;
}

.emails-status {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 16px;
}

.emails-list {
  min-height: 0;
  overflow: auto;
}

.email-row {
  content-visibility: auto;
  contain-intrinsic-size: 112px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  width: 100%;
  gap: 10px;
  align-items: start;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px 16px;
  text-align: left;
}

.email-row:hover,
.email-row.selected {
  background: rgba(232, 247, 250, 0.88);
  box-shadow: none;
  transform: none;
}

.email-row-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: #eaf1f4;
  color: var(--accent-strong);
  font-weight: 900;
}

.email-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.email-row-main strong,
.email-row-main small,
.email-row-main p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-row-main strong {
  white-space: nowrap;
}

.email-row-main small {
  color: var(--muted);
  white-space: nowrap;
}

.email-row-main p {
  display: -webkit-box;
  margin: 0;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.email-row-meta {
  display: flex;
  grid-column: 2 / -1;
  flex-wrap: wrap;
  gap: 6px;
}

.email-row-meta em {
  border-radius: 999px;
  background: rgba(8, 122, 143, 0.09);
  color: var(--accent-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  padding: 3px 8px;
}

.emails-detail {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 18px;
}

.email-thread {
  display: block;
  gap: 10px;
  width: min(100%, 1120px);
  height: auto;
  min-height: 0;
  margin: 0 auto;
}

.email-thread > * + * {
  margin-top: 10px;
}

.email-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(232, 247, 250, 0.72), rgba(255, 255, 255, 0.94) 44%),
    var(--surface-solid);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}

.email-mobile-back {
  display: none;
}

.email-detail-header h2 {
  overflow-wrap: anywhere;
  font-size: 22px;
  letter-spacing: 0;
}

.email-detail-header p {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.email-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-detail-actions .button-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  padding: 0 12px;
  text-decoration: none;
}

.email-detail-header p span,
.email-share-panel {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #52606f;
  font-size: 12px;
  font-weight: 760;
  padding: 3px 8px;
}

.email-share-panel {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 20px rgba(20, 32, 42, 0.035);
  padding: 12px;
}

.email-share-panel strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.email-share-panel p {
  margin-top: 3px;
}

.email-attachments,
.email-body {
  display: grid;
  gap: 8px;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  padding: 10px 12px;
}

.email-attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 280px));
  gap: 8px;
}

.email-attachment-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.email-attachment {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 10px;
  text-align: left;
  text-decoration: none;
}

.email-attachment:hover {
  border-color: rgba(8, 122, 143, 0.32);
  background: var(--accent-soft);
}

.email-attachment[aria-disabled="true"],
.email-attachment:disabled {
  pointer-events: none;
  opacity: 0.62;
}

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

.email-attachment small {
  color: var(--muted);
}

.email-attachment-preview {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #ffffff;
}

.email-attachment-preview.image {
  display: grid;
  place-items: center;
  min-height: 140px;
  max-height: 260px;
  overflow: hidden;
}

.email-attachment-preview.image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: contain;
}

.email-attachment-preview.pdf {
  min-height: 320px;
}

.email-body {
  align-content: start;
  overflow: visible;
}

.email-body-frame {
  width: 100%;
  min-height: min(58vh, 640px);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #ffffff;
}

.email-body-content {
  min-height: 180px;
  max-height: min(56vh, 620px);
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #ffffff;
  color: var(--text);
  line-height: 1.55;
  padding: 14px;
  overflow-wrap: anywhere;
}

.email-body-content a {
  color: var(--accent-strong);
  font-weight: 760;
}

.spareroom-inbox {
  display: grid;
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  border-top: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 251, 0.92)),
    var(--bg);
}

.spareroom-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
}

.spareroom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px;
}

.spareroom-toolbar p {
  display: none;
}

.spareroom-toolbar h2 {
  font-size: 22px;
}

.spareroom-toolbar .primary {
  min-height: 34px;
  border-radius: 10px;
  padding: 7px 14px;
}

.spareroom-stats {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 7px;
}

.spareroom-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  font-size: 11px;
  box-shadow: none;
  padding: 3px 8px;
}

.spareroom-stats strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1;
}

.spareroom-import,
.spareroom-filters {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
}

.spareroom-import {
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 12px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 251, 0.82));
  box-shadow: 0 10px 28px rgba(20, 32, 42, 0.045);
  padding: 8px;
}

.spareroom-header-controls .spareroom-import,
.spareroom-header-controls .spareroom-filters {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.spareroom-header-controls .spareroom-import {
  align-items: center;
}

.spareroom-header-controls .spareroom-action-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spareroom-header-controls .spareroom-auto-reply {
  grid-column: auto;
  grid-template-columns: auto minmax(118px, auto);
}

.spareroom-header-controls .spareroom-filters {
  grid-template-columns: 220px minmax(176px, 220px);
  justify-content: start;
}

.spareroom-import[data-has-session="true"] .spareroom-session-card {
  display: none;
}

.spareroom-import small {
  display: none;
}

.spareroom-filters {
  padding: 14px 18px;
}

.spareroom-import small {
  grid-column: 1 / -1;
}

.spareroom-session-card {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.spareroom-session-card small {
  display: none;
}

.spareroom-session-card .session-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 4px rgba(138, 151, 165, 0.12);
}

.spareroom-import[data-has-session="true"] .session-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(19, 138, 85, 0.13);
}

.spareroom-session-card strong {
  display: block;
  line-height: 1.15;
}

.spareroom-session-card small,
.spareroom-import small {
  color: var(--muted);
}

.spareroom-session-card button {
  min-height: 32px;
  border-radius: 10px;
  padding-inline: 10px;
}

#spareroomImportButton {
  grid-column: auto;
  min-height: 42px;
  border-radius: 999px;
  padding-inline: 16px;
}

.spareroom-action-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 8px;
  align-items: center;
}

.import-control {
  position: relative;
  overflow: hidden;
}

.import-control::before {
  content: none;
  display: none;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
}

.spareroom-login-fields {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  animation: cardIn 150ms var(--ease);
}

.spareroom-quick-login {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto;
  gap: 8px;
}

.spareroom-quick-login input {
  min-height: 42px;
  min-width: 0;
  padding: 8px 10px;
}

.inline-help {
  color: var(--muted);
  font-size: 13px;
}

.spareroom-login-fields button {
  min-height: 42px;
  padding-inline: 18px;
  white-space: nowrap;
}

.remember-login {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  padding: 2px 4px;
}

.spareroom-auto-import,
.spareroom-auto-reply {
  display: grid;
  grid-template-columns: auto minmax(78px, 0.45fr);
  grid-column: auto;
  gap: 8px;
  align-items: center;
  border-top: 0;
  padding-top: 0;
}

.spareroom-auto-reply {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto);
}

.switch-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #52606f;
  font-size: 13px;
  font-weight: 820;
  padding: 0 10px;
  white-space: nowrap;
  transition:
    background 140ms var(--ease),
    border-color 140ms var(--ease),
    box-shadow 140ms var(--ease);
}

.switch-pill:hover,
.switch-pill:focus-within {
  border-color: rgba(8, 122, 143, 0.28);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.switch-pill span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spareroom-auto-import select,
.spareroom-auto-reply button {
  min-height: 42px;
  border-radius: 999px;
}

.spareroom-auto-import select {
  min-width: 78px;
  padding: 6px 8px;
}

.spareroom-auto-import input[type="checkbox"],
.spareroom-auto-reply input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
}

.spareroom-auto-reply button {
  padding-inline: 12px;
  white-space: nowrap;
}

.spareroom-import.is-importing .spareroom-session-card .session-dot {
  background: var(--accent);
  box-shadow: none;
  animation: pulseDot 900ms var(--ease) infinite;
}

.spareroom-import.is-importing #spareroomImportButton::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

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

@keyframes pulseDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}

.spareroom-filters {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0;
  border-top: 0;
}

.spareroom-filters input,
.spareroom-filters select {
  min-height: 40px;
}

.spareroom-filters .toolbar-search {
  justify-self: end;
}

.spareroom-lead-list {
  min-height: 0;
  overflow: auto;
  padding-bottom: 10px;
}

.spareroom-lead-row {
  content-visibility: auto;
  contain-intrinsic-size: 94px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  width: 100%;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px 18px;
  text-align: left;
}

.spareroom-lead-row:hover,
.spareroom-lead-row.selected {
  background: rgba(232, 247, 250, 0.88);
  box-shadow: none;
  transform: none;
}

.spareroom-lead-row.auto-replied-now {
  position: relative;
  overflow: hidden;
  background: rgba(232, 247, 250, 0.96);
  animation: autoReplyGlow 1600ms var(--ease) 2;
}

.spareroom-lead-row.auto-replied-now::after {
  content: "Auto replied now";
  justify-self: end;
  grid-column: 2 / -1;
  width: max-content;
  border-radius: 999px;
  background: rgba(19, 138, 85, 0.12);
  color: #176f48;
  font-size: 11px;
  font-weight: 850;
  padding: 4px 9px;
}

.spareroom-avatar {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: #eaf1f4;
  color: var(--accent-strong);
  font-style: normal;
  font-weight: 850;
}

.spareroom-avatar.large {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(135deg, #d9f2f6, #eef6f8);
  box-shadow: inset 0 0 0 1px rgba(8, 122, 143, 0.08);
  font-size: 18px;
}

.spareroom-lead-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

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

.spareroom-lead-row .status-pill {
  justify-self: end;
}

.spareroom-lead-row p {
  display: -webkit-box;
  grid-column: 2 / -1;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.spareroom-detail {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px 18px;
}

.spareroom-thread {
  display: grid;
  gap: 10px;
  width: min(100%, 1180px);
  max-width: 1180px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}

.spareroom-workspace {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.spareroom-detail-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(170px, 220px);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(232, 247, 250, 0.72), rgba(255, 255, 255, 0.94) 44%),
    var(--surface-solid);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}

.spareroom-mobile-back {
  display: none;
}

.spareroom-detail-header h2,
.spareroom-toolbar h2,
.settings-header h2 {
  margin: 0;
}

.spareroom-detail-header h2 {
  font-size: 22px;
  letter-spacing: 0;
}

.spareroom-detail-header p {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.spareroom-detail-header p span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #52606f;
  font-size: 12px;
  font-weight: 760;
  padding: 2px 8px;
}

.spareroom-detail-header select {
  justify-self: end;
  max-width: 220px;
}

.spareroom-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.spareroom-summary-grid div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 20px rgba(20, 32, 42, 0.035);
  min-width: 0;
  padding: 8px 10px;
}

.spareroom-summary-grid span {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.spareroom-summary-grid strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-copy {
  min-height: 26px;
  border-radius: 999px;
  background: rgba(8, 122, 143, 0.09);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 850;
  padding: 3px 9px;
}

.chip-copy:disabled {
  opacity: 0.42;
}

.spareroom-fields,
.spareroom-thread-grid {
  display: grid;
  gap: 10px;
}

.spareroom-fields {
  grid-template-columns: minmax(140px, 1fr) 92px minmax(132px, 0.8fr) minmax(190px, 1.2fr) minmax(160px, 1fr);
  align-items: end;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  padding: 10px;
}

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

.spareroom-fields span {
  color: #607080;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.spareroom-thread-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
  overflow: hidden;
  min-height: 0;
}

.spareroom-message-pane,
.spareroom-reply-pane,
.spareroom-form label,
.spareroom-card label,
.room-form label {
  display: grid;
  gap: 8px;
}

.spareroom-message-pane span,
.spareroom-reply-pane span,
.spareroom-form span,
.spareroom-card label span,
.room-form label span {
  color: #52606f;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

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

.pane-title-row button {
  min-height: 28px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
}

.pane-title-row em {
  min-height: 28px;
  border-radius: 999px;
  background: #eef4f6;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  padding: 5px 10px;
}

.spareroom-message-pane textarea,
.spareroom-reply-pane textarea {
  height: 100%;
  min-height: 0;
  resize: vertical;
  line-height: 1.45;
}

.spareroom-clean-thread {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100%;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(248, 250, 251, 0.86), rgba(255, 255, 255, 0.92));
  padding: 12px;
}

.spareroom-bubble {
  display: grid;
  gap: 7px;
  width: min(88%, 520px);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 32, 42, 0.045);
  padding: 10px 12px;
}

.spareroom-bubble.out {
  justify-self: end;
  border-color: rgba(19, 138, 85, 0.18);
  background: #ecf8f2;
}

.spareroom-bubble.in {
  justify-self: start;
}

.spareroom-bubble p {
  margin: 0 0 5px;
  color: var(--text);
}

.spareroom-bubble p:last-child {
  margin-bottom: 0;
}

.spareroom-bubble small,
.spareroom-clean-empty {
  color: var(--muted);
  font-size: 12px;
}

.spareroom-message-pane,
.spareroom-reply-pane {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  padding: 12px;
}

.spareroom-message-pane textarea,
.spareroom-reply-pane textarea,
.spareroom-thread > input {
  background: #ffffff;
}

.spareroom-thread > input[data-spareroom-notes] {
  min-height: 44px;
  border-radius: 14px;
}

.spareroom-action-bar {
  position: static;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 -8px 28px rgba(20, 32, 42, 0.08);
  padding: 10px;
  backdrop-filter: blur(18px);
}

.spareroom-action-bar button {
  flex: 0 1 auto;
}

.spareroom-action-bar .more-menu {
  margin-left: auto;
}

.spareroom-more-panel {
  bottom: calc(100% + 12px);
  right: 0;
  max-height: min(420px, calc(100dvh - 180px));
  overflow: auto;
}

.recent-list,
.viewing-list {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.room-contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  align-items: start;
  gap: 14px;
  padding: 16px;
}

.integration-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 16px 0;
  border: 1px solid rgba(203, 215, 224, 0.92);
  border-radius: 10px;
  padding: 14px 16px;
  background: #f8fafb;
}

.integration-card > div:first-child {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.integration-card strong {
  color: var(--text);
  font-size: 15px;
}

.integration-card small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.integration-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.recent-item,
.viewing-group,
.property-card,
.room-card,
.integration-card,
.onboarding-card,
.module-card {
  content-visibility: auto;
  contain-intrinsic-size: 1px 180px;
}

.google-contacts-account,
.google-contacts-config,
.email-settings-form,
.ai-settings-form {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.ai-settings-form {
  grid-template-columns: auto minmax(180px, 0.9fr) minmax(190px, 1fr) minmax(130px, 0.7fr) minmax(130px, 0.7fr) 90px auto;
  align-items: center;
}

.google-contacts-account {
  grid-template-columns: auto minmax(220px, 1fr);
  align-items: center;
  max-width: 460px;
  color: var(--muted);
  font-size: 12px;
}

.google-contacts-config {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr) auto;
}

.google-contacts-account select,
.ai-settings-form select,
.google-contacts-config input,
.email-settings-form input,
.gocardless-profile-fields select,
.gocardless-profile-fields input,
.ai-settings-form input {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
}

.ai-provider-actions {
  justify-content: flex-start;
  margin-top: 8px;
}

.codex-login-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

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

.codex-login-panel strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.04em;
}

.email-settings-form {
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  align-items: center;
}

.email-account-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
  max-width: 760px;
}

.email-account-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.email-account-list-head strong {
  font-size: 13px;
}

.email-account-list-head small {
  color: var(--muted);
}

.email-account-edit-hint {
  display: block;
  margin: 4px 0 12px;
  color: var(--muted);
}

.email-account-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid rgba(8, 122, 143, 0.20);
  border-radius: 10px;
  border-color: rgba(8, 122, 143, 0.20);
  background: #ffffff;
  box-shadow: none;
}

.email-account-summary.primary-account {
  border-color: rgba(8, 122, 143, 0.46);
  background: #f0fbfd;
}

.email-account-summary span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.email-account-summary strong,
.email-account-summary small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.email-account-summary small {
  color: var(--muted);
  font-weight: 600;
}

.email-account-badges {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

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

.email-account-badges em {
  border: 1px solid rgba(8, 122, 143, 0.22);
  border-radius: 999px;
  padding: 3px 7px;
  background: #ffffff;
  color: var(--accent-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.email-account-watch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid rgba(8, 122, 143, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.email-account-watch-toggle input {
  width: 14px;
  height: 14px;
  min-width: 14px;
  padding: 0;
}

.email-account-watch-toggle.disabled {
  opacity: 0.55;
}

.email-account-form {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  padding: 12px;
  margin-top: 10px;
  border: 1px solid rgba(203, 215, 224, 0.92);
  border-radius: 10px;
  background: #ffffff;
}

.email-account-form .full,
.email-check-results {
  grid-column: 1 / -1;
}

.email-account-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.email-account-form-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.email-account-form-head strong,
.email-account-form-head small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.email-account-form-head small {
  color: var(--muted);
}

.email-account-form-head > span {
  flex: 0 0 auto;
  border: 1px solid rgba(8, 122, 143, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  background: #f0fbfd;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
}

.email-message-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.email-message-list article {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
}

.email-message-list article strong,
.email-message-list article span,
.email-message-list article small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.email-settings-form .check {
  min-height: 36px;
  align-items: center;
}

.payment-settings-form,
.bank-account-list {
  display: grid;
  gap: 14px;
}

.bank-account-manager {
  display: grid;
  gap: 10px;
}

.bank-account-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bank-account-manager h5 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.bank-account-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.gocardless-profile-fields {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.gocardless-profile-fields > div {
  display: grid;
  gap: 3px;
}

.gocardless-profile-fields strong {
  color: var(--ink);
}

.gocardless-profile-fields small {
  color: var(--muted);
  font-size: 12px;
}

.bank-account-row-head,
.payment-settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.payment-settings-actions {
  justify-content: flex-end;
}

.initial-payment-email-preview {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.initial-payment-email-preview small {
  color: var(--muted);
}

.initial-payment-bank-select {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.initial-payment-bank-select select {
  min-width: 0;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.initial-payment-email-preview > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  font-size: 12px;
}

.initial-payment-email-preview b {
  color: var(--text);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.initial-payment-email-preview b a {
  color: var(--accent);
}

.initial-payment-email-preview pre {
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  border-top: 1px solid var(--line);
  margin: 2px 0 0;
  padding-top: 8px;
  color: var(--muted);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.initial-payment-email-html-preview {
  max-height: none;
  overflow: visible;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 14px 0 0;
  color: #111111;
  font: 14px/1.45 Arial, sans-serif;
}

.initial-payment-email-html-preview table {
  width: auto;
  max-width: 100%;
}

.confirm-card.initial-payment-email-modal {
  width: min(1120px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
}

.initial-payment-email-modal .zoho-sign-review-header,
.initial-payment-email-modal .zoho-sign-review-actions {
  padding: 16px 22px;
}

.initial-payment-email-modal [data-initial-payment-email-review],
.initial-payment-email-modal [data-dd-setup-email-review] {
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 18px 22px;
}

.initial-payment-email-modal .initial-payment-email-preview {
  padding: 16px;
}

.recent-item,
.add-room-card {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}

.recent-item {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  text-align: left;
}

.recent-item span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

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

.viewing-group {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

.viewing-automation {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.viewing-automation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.viewing-automation-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 8px;
  flex: 1 1 520px;
}

.viewing-automation-counts article {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
  padding: 10px 12px;
}

.viewing-automation-counts span,
.viewing-section-title span,
.viewing-pipeline-item small,
.viewing-exception-item small,
.viewing-audit-list small {
  color: var(--muted);
  font-size: 12px;
}

.viewing-automation-counts strong {
  color: var(--ink);
  font-size: 21px;
}

.viewing-automation-actions,
.viewing-pipeline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.viewing-rules-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
  align-items: end;
}

.viewing-rules-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.viewing-rules-form .check {
  display: flex;
  align-items: center;
  min-height: 36px;
  text-transform: none;
}

.viewing-rules-form input,
.viewing-rules-form select {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
}

.viewing-automation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.viewing-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.viewing-pipeline-list,
.viewing-exception-list,
.viewing-audit-list {
  display: grid;
  gap: 8px;
}

.viewing-pipeline-item,
.viewing-exception-item,
.viewing-audit-list article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.viewing-pipeline-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-left: 4px solid #6b7280;
}

.viewing-pipeline-item.risk-low {
  border-left-color: #0f9f6e;
}

.viewing-pipeline-item.risk-medium {
  border-left-color: #d97706;
}

.viewing-pipeline-item.risk-high {
  border-left-color: #dc2626;
}

.viewing-pipeline-item > button {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.viewing-pipeline-item p,
.viewing-exception-item p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.viewing-exception-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.viewing-audit-list article {
  gap: 2px;
}

.viewing-calendar-list,
.viewing-reminder-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.viewing-calendar-item,
.viewing-reminder-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.viewing-calendar-item > button {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.viewing-calendar-item small,
.viewing-reminder-list small {
  color: var(--muted);
  font-size: 12px;
}

.viewing-reminder-list article {
  grid-template-columns: 1fr;
}

.viewing-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.viewing-group-header strong {
  font-size: 16px;
}

.viewing-items {
  display: grid;
  gap: 8px;
}

.viewing-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 10px;
  text-align: left;
}

.viewing-item:hover {
  border-color: rgba(8, 122, 143, 0.24);
  background: var(--accent-soft);
}

.viewing-item p,
.viewing-item small,
.viewing-item em {
  color: var(--muted);
}

.viewing-item small {
  display: block;
  margin-top: 2px;
}

.viewing-item em {
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.share-text {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.add-room-card {
  grid-template-columns: 170px 130px minmax(220px, 1fr) auto;
}

.room-card {
  overflow: hidden;
  align-self: start;
}

.room-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 16px;
  text-align: left;
}

.room-summary:hover {
  background: rgba(232, 247, 250, 0.55);
  box-shadow: none;
  transform: none;
}

.room-summary-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.room-summary-title small {
  max-width: 100%;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.room-summary strong,
.room-title strong {
  font-size: 17px;
}

.room-summary small,
.room-title span,
.room-form label span,
.empty-row {
  color: var(--muted);
}

.room-summary-meta {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.room-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  background: #f8fafb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
}

.room-chip-strong {
  color: var(--text);
  background: rgba(232, 247, 250, 0.72);
}

.chevron {
  grid-column: 1 / -1;
  justify-self: start;
  font-weight: 800;
  color: var(--muted);
}

.room-body {
  display: none;
  border-top: 1px solid var(--line-soft);
}

.room-card.expanded .room-body {
  display: block;
  animation: cardIn 160ms var(--ease);
}

.room-card.expanded {
  grid-column: 1 / -1;
}

.room-form {
  display: grid;
  grid-template-columns: 130px minmax(220px, 1.3fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.room-title {
  display: grid;
  gap: 4px;
}

.room-actions,
.contact-actions {
  display: flex;
  gap: 8px;
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
  gap: 12px;
  padding: 14px 16px 16px;
}

.room-video-tour {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: start;
  margin: 0 16px 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(248, 250, 251, 0.92);
}

.room-video-tour > div {
  display: grid;
  gap: 5px;
}

.room-video-tour span {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
}

.room-video-tour p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.room-video-tour video {
  width: 100%;
  max-height: 180px;
  border-radius: 10px;
  background: #0f172a;
}

.room-video-tour-form {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.room-video-tour-form input[type="file"] {
  flex: 1 1 220px;
}

.contact-row,
.add-contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(248, 250, 251, 0.88);
  padding: 14px;
}

.add-contact-row {
  border-style: dashed;
  background: rgba(251, 252, 253, 0.94);
}

.contact-card-head,
.contact-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-card-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

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

.contact-card-head small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.contact-card-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contact-card-fields select,
.contact-card-fields input,
.contact-card-notes {
  min-width: 0;
  width: 100%;
}

.empty-row {
  padding: 4px 0 8px;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.avatar-modal {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 24, 32, 0.72);
  padding: 24px;
  animation: fadeIn 150ms var(--ease);
}

.avatar-modal img {
  max-width: min(420px, 90vw);
  max-height: 82vh;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.avatar-modal button {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  padding: 0;
  font-size: 26px;
  line-height: 1;
}

.media-preview-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 24, 32, 0.76);
  animation: fadeIn 150ms var(--ease);
}

.media-preview-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1120px, calc(100vw - 44px));
  height: min(860px, calc(100dvh - 44px));
  overflow: hidden;
  border: 1px solid rgba(220, 227, 233, 0.72);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.media-preview-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.media-preview-card header h2 {
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-preview-card header div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.media-preview-card header a {
  color: var(--accent-strong);
  font-weight: 800;
  text-decoration: none;
}

.media-preview-card header button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.media-preview-body {
  position: relative;
  display: grid;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  background: #101820;
}

.media-preview-stage {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  place-items: center;
}

.media-preview-object,
.media-preview-body img,
.media-preview-body video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1120px, calc(100vw - 44px));
  max-height: min(802px, calc(100dvh - 102px));
  object-fit: contain;
}

.media-preview-nav {
  position: absolute;
  top: calc(50% + 28px);
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(203, 213, 224, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
  color: var(--text);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  padding: 0 0 4px;
  transform: translateY(-50%);
}

.media-preview-nav.prev {
  left: 14px;
}

.media-preview-nav.next {
  right: 14px;
}

.media-preview-nav:disabled {
  cursor: default;
  opacity: 0.35;
}

.media-preview-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

.media-preview-file {
  display: grid;
  gap: 10px;
  max-width: 460px;
  border-radius: 12px;
  background: #ffffff;
  padding: 22px;
  text-align: center;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(10px);
}

.confirm-card {
  width: min(520px, 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
  padding: 20px;
  animation: cardIn 160ms var(--ease);
}

.confirm-header,
.confirm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.confirm-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.confirm-header h2 {
  margin: 4px 0 0;
  font-size: 22px;
}

#closeViewingConfirm,
.confirm-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  font-size: 24px;
}

.app-confirm-card {
  width: min(460px, 100%);
}

.app-confirm-message {
  margin-top: 18px;
}

.confirm-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--ink);
  font-weight: 700;
}

.confirm-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand);
}

.confirm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.confirm-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.confirm-grid input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--ink);
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.confirm-note {
  margin: 14px 0 18px;
  color: var(--muted);
  line-height: 1.45;
}

.confirm-actions button {
  min-width: 120px;
}

.zoho-sign-review-modal {
  place-items: center;
  padding: 16px;
}

.zoho-sign-review-card {
  width: min(1420px, calc(100vw - 32px)) !important;
  max-width: none !important;
  height: calc(100dvh - 32px);
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}

.zoho-sign-review-header,
.zoho-sign-review-actions {
  padding: 12px 16px;
}

.zoho-sign-review-header {
  border-bottom: 1px solid var(--line);
}

.zoho-sign-review-actions {
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.zoho-sign-review-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  background: #eef2f5;
}

.zoho-sign-preview-panel {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border-right: 1px solid var(--line);
}

.zoho-sign-panel-head {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.zoho-sign-panel-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoho-sign-panel-head span,
.zoho-sign-muted {
  color: var(--muted);
  font-size: 12px;
}

.zoho-sign-preview-frame {
  display: block;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
  background: #dfe6eb;
}

.zoho-sign-review-side {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  background: #ffffff;
  border-left: 1px solid var(--line);
}

.zoho-sign-review-side section {
  display: grid;
  gap: 10px;
}

.zoho-sign-review-side h3 {
  margin: 0;
  font-size: 14px;
}

.zoho-sign-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.zoho-sign-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.zoho-sign-recipient-list,
.zoho-sign-attachment-list {
  display: grid;
  gap: 8px;
}

.zoho-sign-recipient-card,
.zoho-sign-attachment {
  display: grid;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  background: #f8fafc;
}

.zoho-sign-recipient-card {
  grid-template-columns: 1fr;
  align-items: start;
}

.zoho-sign-recipient-card.selectable {
  grid-template-columns: 18px minmax(0, 1fr);
  cursor: pointer;
}

.zoho-sign-recipient-card.selectable:has(input:not(:checked)) {
  opacity: 0.58;
}

.zoho-sign-recipient-card.selectable input {
  margin-top: 2px;
  accent-color: var(--accent);
}

.zoho-sign-recipient-card.selectable > span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.zoho-sign-attachment {
  grid-template-columns: 18px minmax(0, 1fr) auto;
}

.zoho-sign-attachment-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #dff4e8;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.zoho-sign-attachment-check::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

.zoho-sign-attachment[data-status="warn"] .zoho-sign-attachment-check {
  background: #fff3d6;
  color: #92400e;
}

.zoho-sign-attachment[data-status="warn"] .zoho-sign-attachment-check::before,
.zoho-sign-attachment[data-status="bad"] .zoho-sign-attachment-check::before {
  content: "!";
  width: auto;
  height: auto;
  border: 0;
  transform: none;
}

.zoho-sign-attachment[data-status="bad"] {
  border-color: #fecaca;
  background: #fff7f5;
}

.zoho-sign-attachment[data-status="bad"] .zoho-sign-attachment-check {
  background: #fee2e2;
  color: #991b1b;
}

.zoho-sign-attachment strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoho-sign-recipient-card small {
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zoho-sign-recipient-card em,
.zoho-sign-attachment small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.zoho-sign-recipient-card em {
  font-style: normal;
}

.zoho-sign-review-alert,
.zoho-sign-review-warning {
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px;
  background: #fff7f5;
  color: #8a1f11;
}

.zoho-sign-review-warning {
  border-color: #fed7aa;
  background: #fff8ed;
  color: #74410f;
}

.zoho-sign-review-alert ul,
.zoho-sign-review-warning ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.45;
}

.zoho-sign-review-override {
  border: 1px solid #fed7aa;
  border-radius: 8px;
}

@media (max-width: 940px) {
  .zoho-sign-review-card {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .zoho-sign-review-layout {
    grid-template-columns: 1fr;
  }

  .zoho-sign-preview-panel {
    min-height: 58dvh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .zoho-sign-review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .zoho-sign-review-actions button {
    width: 100%;
  }
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes autoReplyGlow {
  0% {
    box-shadow: inset 4px 0 0 var(--accent), 0 0 0 rgba(8, 122, 143, 0);
  }

  45% {
    box-shadow: inset 4px 0 0 var(--accent), 0 12px 34px rgba(8, 122, 143, 0.16);
  }

  100% {
    box-shadow: inset 4px 0 0 rgba(8, 122, 143, 0), 0 0 0 rgba(8, 122, 143, 0);
  }
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes draftLoading {
  from {
    background-position: 120% 0, 0 0;
  }

  to {
    background-position: -120% 0, 0 0;
  }
}

@media (max-width: 1500px) {
  .topbar nav,
  .view-tabs {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .toggle {
    justify-self: end;
  }
}

@media (max-width: 1180px) {
  .tenant-support-shell {
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    grid-template-areas: "properties workspace";
    grid-auto-rows: minmax(0, auto);
  }

  .tenant-support-tasks,
  .tenant-action-panel {
    min-height: 220px;
  }

  .tenant-task-list,
  .tenant-action-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .tenant-message {
    max-width: min(560px, 84%);
  }
}

@media (max-width: 860px) {
  .assistant-bubble {
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .assistant-panel {
    right: 10px;
    bottom: calc(142px + env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    height: min(620px, calc(100dvh - 132px));
  }

  .assistant-panel.expanded {
    right: 10px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    height: min(760px, calc(100dvh - 108px));
  }

  body {
    overflow: auto;
    overflow-x: hidden;
  }

  .topbar {
    position: sticky;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow-x: hidden;
    gap: 8px;
    padding: 10px 12px;
  }

  .brand {
    flex: 1 0 100%;
  }

  .topbar nav,
  .view-tabs {
    grid-column: auto;
    flex: 1 0 100%;
    width: 100%;
  }

  .topbar nav button,
  .view-tabs button {
    flex: 0 0 auto;
  }

  .toggle {
    flex: 1 1 100%;
    justify-self: stretch;
    white-space: normal;
  }

  .batch-button {
    width: 100%;
  }

  .review-module-controls {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "filters"
      "review-tools"
      "batch";
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px 10px;
  }

  .review-module-controls #filters {
    grid-area: filters;
    justify-content: flex-start;
    justify-self: stretch;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    overflow: visible;
  }

  .review-module-controls #filters button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    white-space: normal;
  }

  #reviewHeaderControls {
    grid-area: review-tools;
    width: 100%;
    min-width: 0;
  }

  .review-batch-controls {
    grid-area: batch;
    justify-self: stretch;
    flex-wrap: wrap;
    min-width: 0;
  }

  .review-batch-controls .batch-button {
    flex: 1 1 150px;
  }

  .review-page.detail-open {
    grid-template-rows: minmax(0, 1fr);
  }

  .review-page.detail-open .review-module-controls {
    display: none;
  }

  .dashboard-page,
  .properties-page,
  .tenant-support-page,
  .tenancy-page,
  .main-page,
  .emails-page,
  .settings-page {
    padding: 12px;
  }

  .tenant-support-page {
    overflow: auto;
  }

  .tenant-support-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "properties"
      "workspace";
    gap: 10px;
    height: auto;
    min-height: 0;
  }

  .tenant-support-sidebar,
  .tenant-property-groups,
  .tenant-support-detail,
  .tenant-property-workspace,
  .tenant-support-tasks,
  .tenant-action-panel {
    min-height: 0;
  }

  .tenant-detail-card {
    min-height: min(720px, calc(100dvh - 116px));
  }

  .tenant-group-list,
  .tenant-property-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 76vw);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
  }

  .tenant-support-intro,
  .tenant-property-groups-head,
  .tenant-task-head,
  .tenant-action-panel-head,
  .tenant-detail-header,
  .tenant-workspace-head {
    padding: 10px 12px;
  }

  .tenant-support-controls {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  .tenant-detail-header {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .tenant-group-switcher,
  .tenant-workspace-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .tenant-support-tasks {
    max-height: 360px;
  }

  .tenant-task-list,
  .tenant-action-list {
    grid-template-columns: 1fr;
  }

  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    min-height: calc(100dvh - 176px);
  }

  .review-layout {
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
  }

  .layout.detail-open,
  .review-page.detail-open .review-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .layout.detail-open .sidebar,
  .review-page.detail-open .sidebar {
    display: none;
  }

  .sidebar {
    min-height: calc(100dvh - 206px);
    border-right: 0;
  }

  .review-page .sidebar,
  .review-page .detail,
  .review-page.detail-open .detail {
    min-height: 0;
  }

  .layout:not(.detail-open) .detail,
  .review-page:not(.detail-open) .detail {
    display: none;
  }

  .search-row {
    grid-template-columns: 1fr 1fr;
  }

  .search-row input {
    grid-column: 1 / -1;
  }

  .search-row.review-controls {
    grid-template-columns: 42px minmax(0, 1fr) 42px minmax(72px, auto);
    align-items: center;
    gap: 8px;
  }

  .search-row.review-controls input,
  .review-controls .toolbar-search,
  .review-controls .toolbar-select,
  .review-controls .select-visible-control,
  .review-controls .auto-send-pill {
    grid-column: auto;
  }

  .review-controls .toolbar-search,
  .review-controls .select-visible-control {
    justify-self: start;
  }

  .review-controls .toolbar-select {
    width: 100%;
    min-width: 0;
  }

  .review-controls .auto-send-pill {
    justify-self: stretch;
    min-width: 0;
    padding-inline: 9px;
  }

  .review-controls .toolbar-search.is-open,
  .review-controls .toolbar-search:focus-within {
    position: absolute;
    z-index: 3;
    left: 10px;
    width: min(280px, calc(100vw - 20px));
  }

  .review-controls .custom-select-kicker,
  .spareroom-filters .custom-select-kicker {
    display: none;
  }

  .review-controls .toolbar-select {
    grid-template-columns: minmax(0, 1fr);
  }

  .chat-row {
    grid-template-columns: 40px 40px minmax(0, 1fr);
  }

  .detail {
    min-height: calc(100dvh - 206px);
  }

  .layout.detail-open .detail {
    display: block;
    min-height: calc(100dvh - 206px);
  }

  .review-page.detail-open .detail {
    display: block;
    min-height: 0;
  }

  .detail-header {
    padding: 12px;
    flex-wrap: wrap;
  }

  .lead-assignment-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    margin-left: 0;
  }

  .lead-assignment-panel button {
    width: 100%;
  }

  .mobile-back {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
  }

  .detail-header h2 {
    font-size: 17px;
  }

  .header-avatar {
    width: 44px;
    height: 44px;
  }

  .detail-controls {
    order: 3;
    flex: 1 1 160px;
    margin-left: 0;
    align-items: flex-end;
  }

  .room-code-picker {
    flex: 1 1 auto;
    min-width: 0;
  }

  .detail-controls button {
    flex: 0 0 auto;
  }

  .messages {
    padding: 14px 12px;
  }

  .message {
    max-width: 92%;
  }

  .composer {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
  }

  .composer-header {
    display: none;
  }

  .draft-editor {
    max-height: 24dvh;
  }

  .actions {
    gap: 7px;
  }

  .actions > button,
  .more-menu,
  .more-button {
    flex: 1 1 auto;
  }

  .more-panel {
    position: fixed;
    right: 10px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-height: 72dvh;
    overflow: auto;
    transform-origin: bottom center;
  }

  .metric-grid,
  .module-grid,
  .tenancy-overview-grid,
  .tenancy-dashboard-grid,
  .tenancy-grid,
  .property-editor,
  .space-form,
  .record-form,
  .property-record-form,
  .ast-record-form,
  .space-record-form,
  .ast-summary,
  .spareroom-fields,
  .spareroom-thread-grid,
  .add-room-card,
  .room-form,
  .contact-main,
  .add-contact-row {
    grid-template-columns: 1fr;
  }

  .tenancy-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: auto;
  }

  .tenancy-nav {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
  }

  .tenancy-nav-head {
    padding: 4px 4px 10px;
  }

  .tenancy-subnav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .tenancy-subnav button {
    flex: 0 0 auto;
    width: auto;
  }

  .tenancy-workbench {
    min-height: 70dvh;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .tenancy-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  .tenancy-toolbar-actions {
    display: grid;
    flex: none;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .tenancy-search-field {
    min-width: 0;
    width: 100%;
  }

  .tenancy-toolbar-actions input {
    width: 100%;
  }

  .tenancy-dashboard {
    padding: 14px;
  }

  .tenancy-records {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 40dvh) minmax(0, 1fr);
    gap: 12px;
    overflow: auto;
    padding: 12px;
  }

  .tenancy-list-pane,
  .tenancy-record-detail {
    min-height: 0;
  }

  .record-detail-header {
    align-items: flex-start;
    padding: 16px;
  }

  .record-section {
    padding: 16px;
  }

  .crm-form-grid,
  .crm-definition-grid,
  .application-workflow {
    grid-template-columns: 1fr;
  }

  .crm-definition-grid div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .module-hero,
  .tenancy-hero,
  .tenancy-property-head,
  .ast-head {
    display: grid;
  }

  .metric-grid {
    gap: 10px;
  }

  .settings-header,
  .spareroom-detail-header,
  .recent-item {
    align-items: stretch;
  }

  .spareroom-detail-header {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .spareroom-detail-header select {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: none;
  }

  .recent-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .recent-item .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .viewing-automation-counts,
  .viewing-rules-form,
  .viewing-automation-grid,
  .viewing-pipeline-item,
  .viewing-exception-item,
  .viewing-calendar-item {
    grid-template-columns: 1fr;
  }

  .viewing-automation-actions,
  .viewing-pipeline-actions {
    justify-content: flex-start;
  }

  .viewing-group-header,
  .viewing-item {
    grid-template-columns: 1fr;
  }

  .viewing-group-header {
    display: grid;
  }

  .viewing-item em {
    white-space: normal;
  }

  .spareroom-inbox {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
  }

  .emails-page {
    padding: 0;
  }

  .emails-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
  }

  .emails-page:not(.detail-open) .emails-detail {
    display: none;
  }

  .emails-page.detail-open .emails-sidebar {
    display: none;
  }

  .emails-sidebar {
    border-right: 0;
  }

  .emails-controls {
    grid-template-columns: 1fr;
  }

  .emails-detail {
    min-height: 0;
    overflow: auto;
    padding: 10px;
  }

  .email-thread {
    height: auto;
  }

  .email-detail-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .email-detail-header .primary {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .email-mobile-back {
    display: inline-flex;
    grid-row: 1;
  }

  .email-attachment-list {
    grid-template-columns: 1fr;
  }

  .spareroom-page:not(.detail-open) .spareroom-detail {
    display: none;
  }

  .spareroom-page.detail-open .spareroom-sidebar {
    display: none;
  }

  .spareroom-page.detail-open .spareroom-module-controls {
    display: none;
  }

  .spareroom-page.detail-open .spareroom-inbox {
    height: 100%;
  }

  .spareroom-header-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .spareroom-module-controls {
    min-height: 0;
    padding: 6px 10px;
  }

  .spareroom-sidebar {
    border-right: 0;
    border-bottom: 0;
  }

  .spareroom-detail {
    min-height: 0;
    overflow: auto;
    padding: 10px;
  }

  .spareroom-import,
  .spareroom-filters {
    grid-template-columns: 1fr;
  }

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

  .spareroom-header-controls .spareroom-import {
    gap: 6px;
  }

  .spareroom-header-controls .spareroom-action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 2px;
  }

  .spareroom-header-controls #spareroomImportButton {
    flex: 1 1 154px;
  }

  .spareroom-header-controls .spareroom-auto-import {
    flex: 0 0 auto;
  }

  .spareroom-header-controls .spareroom-auto-reply {
    flex: 1 1 100%;
  }

  .spareroom-header-controls #spareroomImportButton,
  .spareroom-header-controls .switch-pill,
  .spareroom-header-controls .spareroom-auto-import select,
  .spareroom-header-controls .spareroom-auto-reply button {
    min-height: 34px;
    border-radius: 10px;
    font-size: 12px;
    padding: 5px 9px;
  }

  .spareroom-header-controls .spareroom-auto-import,
  .spareroom-header-controls .spareroom-auto-reply {
    display: flex;
    gap: 6px;
  }

  .spareroom-header-controls .spareroom-auto-reply {
    grid-column: auto;
  }

  .spareroom-header-controls .spareroom-auto-reply .switch-pill {
    flex: 1 1 auto;
  }

  .spareroom-login-fields,
  .spareroom-session-card {
    grid-template-columns: 1fr;
  }

  .spareroom-quick-login {
    grid-template-columns: 1fr;
  }

  .spareroom-filters {
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 6px;
  }

  .spareroom-filters .toolbar-select {
    grid-template-columns: minmax(0, 1fr);
  }

  .spareroom-filters .toolbar-search.is-open,
  .spareroom-filters .toolbar-search:focus-within {
    position: absolute;
    z-index: 3;
    right: 10px;
    width: min(280px, calc(100vw - 20px));
  }

  .spareroom-session-card .session-dot {
    display: none;
  }

  .spareroom-mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 10px;
    padding: 5px 10px;
  }

  .spareroom-detail-header {
    grid-template-columns: auto 44px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 10px;
  }

  .spareroom-detail-header .spareroom-mobile-back + div {
    grid-column: 2 / -1;
  }

  .spareroom-detail-header select {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: none;
  }

  .spareroom-detail-header h2 {
    font-size: 18px;
  }

  .spareroom-summary-grid div {
    border-radius: 14px;
  }

  .spareroom-thread {
    height: auto;
  }

  .spareroom-workspace {
    grid-template-rows: auto;
  }

  .spareroom-thread-grid {
    overflow: visible;
  }

  .spareroom-message-pane,
  .spareroom-reply-pane {
    min-height: 240px;
  }

  .spareroom-clean-thread {
    max-height: 280px;
  }

  .spareroom-action-bar button {
    flex: 1 1 160px;
  }

  .room-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .room-summary-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .contact-row,
  .contact-card-fields {
    grid-template-columns: 1fr;
  }

  .contact-actions,
  .room-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 13px;
  }

  button {
    min-height: 42px;
  }

  .brand h1 {
    font-size: 17px;
  }

  .topbar nav,
  .view-tabs {
    gap: 6px;
    margin: 0 -2px;
    padding: 0 2px 3px;
  }

  .topbar nav {
    order: 3;
  }

  .view-tabs {
    order: 2;
  }

  .toggle {
    order: 4;
    font-size: 12px;
  }

  .topbar nav button,
  .view-tabs button {
    min-height: 36px;
    padding: 6px 9px;
  }

  .layout {
    grid-template-rows: minmax(0, 1fr);
  }

  .sidebar,
  .detail,
  .layout.detail-open .detail,
  .review-page.detail-open .detail {
    min-height: calc(100dvh - 198px);
  }

  .search-row {
    padding: 10px;
  }

  .select-chat {
    padding-top: 16px;
  }

  .chat-item {
    padding: 12px 10px 12px 0;
  }

  .snippet {
    -webkit-line-clamp: 1;
  }

  .composer {
    padding-inline: 8px;
  }

  .draft-editor {
    min-height: 76px;
    padding: 11px 12px;
  }

  .notice {
    flex-basis: 100%;
    margin-left: 0;
  }

  .dashboard-page,
  .properties-page,
  .tenant-support-page,
  .tenancy-page,
  .main-page,
  .settings-page,
  .spareroom-detail {
    padding: 10px;
  }

  .property-form,
  .property-card {
    grid-template-columns: 1fr;
  }

  .tenant-support-controls,
  .tenant-detail-meta,
  .tenant-link-form {
    grid-template-columns: 1fr;
  }

  .tenant-support-intro,
  .tenant-property-groups-head,
  .tenant-task-head,
  .tenant-action-panel-head,
  .tenant-detail-header,
  .tenant-workspace-head,
  .tenant-link-form,
  .tenant-reply-form {
    padding-inline: 12px;
  }

  .tenant-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .tenant-workspace-tabs {
    padding-inline: 12px;
  }

  .tenant-message {
    min-width: min(190px, 88%);
    max-width: 92%;
  }

  .tenant-support-page .tenant-reply-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .tenant-support-page .tenant-reply-input {
    grid-template-columns: minmax(0, 1fr);
  }

  .tenant-support-page .tenant-reply-input textarea {
    min-height: 96px;
  }

  .tenant-support-page .tenant-reply-actions {
    justify-content: flex-start;
  }

  .tenant-reply-form button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .tenant-reply-form button.primary {
    flex-basis: 100%;
    margin-left: 0;
  }

  .tenant-knowledge-panel {
    left: 8px;
    right: 8px;
    width: auto;
  }

  .tenant-floating-menu {
    max-height: 240px;
    overflow-y: auto;
  }

  .tenant-submenu {
    position: static;
    display: none;
    width: auto;
    max-height: 220px;
    margin: 3px 0 3px 12px;
    box-shadow: none;
  }

  .tenant-menu-item:hover > .tenant-submenu,
  .tenant-menu-item:focus-within > .tenant-submenu {
    display: grid;
  }

  .tenant-response-flyout {
    width: auto;
  }

  .tenant-response-grid {
    grid-template-columns: 1fr;
  }

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

  .metric-grid strong {
    font-size: 26px;
  }

  .settings-header {
    padding: 14px;
  }

  .recent-list,
  .room-contact-list {
    padding: 12px;
  }

  .spareroom-inbox {
    height: 100%;
  }

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

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

  .confirm-actions button {
    flex: 1;
  }
}

@media (max-width: 860px) {
  .room-contact-list {
    grid-template-columns: 1fr;
  }

  .topbar {
    gap: 6px;
    min-height: 0;
    padding: 8px 10px;
  }

  .brand {
    flex-basis: 100%;
  }

  .brand h1 {
    font-size: 18px;
    line-height: 1.18;
  }

  .brand p {
    margin-top: 2px;
    font-size: 12px;
  }

  .state-dot {
    width: 8px;
    height: 8px;
  }

  .topbar nav,
  .view-tabs {
    gap: 6px;
    padding-bottom: 2px;
  }

  .topbar nav button,
  .view-tabs button,
  .module-control-row button,
  .module-control-row select,
  .module-control-row .toolbar-select,
  .module-control-row .toolbar-search,
  .module-control-row .icon-control,
  .module-control-row .switch-pill {
    min-height: 34px;
    border-radius: 10px;
    padding: 5px 9px;
    font-size: 12px;
  }

  .view-tabs button {
    white-space: nowrap;
  }

  .nav-badge,
  .count-badge {
    min-width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .review-module-controls {
    gap: 6px;
    padding: 6px 8px 8px;
  }

  .review-module-controls #filters {
    gap: 5px;
  }

  .review-module-controls #filters button {
    min-height: 34px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .search-row.review-controls {
    grid-template-columns: 36px minmax(0, 1fr) 36px minmax(66px, auto);
    gap: 6px;
  }

  .select-visible-control {
    width: 36px;
    min-width: 36px;
    font-size: 0 !important;
    padding: 0 !important;
  }

  .toolbar-search .toolbar-icon,
  .icon-control svg {
    width: 18px;
    height: 18px;
  }

  .review-page.detail-open .panel {
    display: block;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .review-page.detail-open .detail {
    overflow: visible;
  }

  .detail-header {
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  .mobile-back {
    min-height: 32px;
    border-radius: 10px;
    padding: 5px 9px;
    font-size: 12px;
  }

  .header-avatar {
    width: 38px;
    height: 38px;
  }

  .detail-header h2 {
    font-size: 16px;
    line-height: 1.18;
  }

  .detail-header p {
    gap: 5px;
    margin-top: 5px;
  }

  .status-pill,
  .room-pill {
    padding: 3px 8px;
    font-size: 11px;
  }

  .detail-controls {
    flex-basis: 100%;
    gap: 6px;
    align-items: end;
  }

  .room-code-picker {
    gap: 3px;
  }

  .room-code-picker span {
    font-size: 10px;
  }

  .room-code-picker select,
  .detail-controls button {
    min-height: 36px;
    border-radius: 10px;
    padding: 7px 10px;
  }

  .messages {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 10px;
  }

  .message {
    max-width: 94%;
    border-radius: 12px;
    padding: 9px 10px;
  }

  .chat-row {
    grid-template-columns: 30px 36px minmax(0, 1fr);
  }

  .select-chat {
    padding-top: 12px;
  }

  .chat-item {
    padding: 10px 9px 10px 0;
  }

  .list-avatar {
    width: 32px;
    height: 32px;
    margin-top: 10px;
  }

  .chat-title {
    gap: 7px;
    font-size: 14px;
  }

  .snippet {
    margin-top: 4px;
    font-size: 13px;
    -webkit-line-clamp: 1;
  }

  .meta-row {
    margin-top: 6px;
    font-size: 11px;
  }

  .composer {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  }

  .draft-editor {
    min-height: 74px;
    max-height: 22dvh;
    padding: 10px 11px;
    font-size: 14px;
    line-height: 1.45;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .actions {
    gap: 6px;
    margin-top: 7px;
  }

  .actions > button,
  .more-button {
    min-height: 38px;
    border-radius: 10px;
    padding: 8px 10px;
  }

  .more-panel {
    max-height: min(58dvh, 460px);
    padding: 10px;
    border-radius: 16px;
  }

  .more-panel button,
  .more-panel select {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .spareroom-module-controls {
    padding: 6px 8px;
  }

  .spareroom-header-controls {
    gap: 6px;
  }

  .spareroom-header-controls .spareroom-action-strip {
    gap: 5px;
  }

  .spareroom-header-controls #spareroomImportButton {
    flex: 1 1 130px;
  }

  .spareroom-header-controls .spareroom-auto-import select {
    width: 78px;
  }

  .spareroom-filters {
    gap: 5px;
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .spareroom-sidebar h2 {
    font-size: 20px;
  }

  .spareroom-lead-row {
    gap: 9px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    padding: 10px 12px;
  }

  .spareroom-lead-row strong {
    font-size: 14px;
  }

  .spareroom-lead-row small {
    font-size: 11px;
  }

  .spareroom-lead-row p {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }

  .spareroom-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .spareroom-detail {
    padding: 8px;
  }

  .spareroom-thread {
    gap: 8px;
  }

  .spareroom-detail-header {
    grid-template-columns: auto 38px minmax(0, 1fr);
    gap: 8px;
    border-radius: 14px;
    padding: 8px;
  }

  .spareroom-avatar.large {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .spareroom-detail-header h2 {
    font-size: 17px;
    line-height: 1.18;
  }

  .spareroom-detail-header p {
    gap: 6px;
    margin-top: 4px;
  }

  .spareroom-detail-header select {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 14px;
  }

  .spareroom-summary-grid {
    gap: 6px;
  }

  .spareroom-summary-grid div {
    min-height: 36px;
    border-radius: 12px;
    padding: 6px 8px;
  }

  .spareroom-summary-grid span {
    font-size: 10px;
  }

  .spareroom-summary-grid strong {
    font-size: 13px;
    line-height: 1.2;
  }

  .chip-copy {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .spareroom-thread-grid {
    gap: 8px;
  }

  .spareroom-message-pane,
  .spareroom-reply-pane {
    min-height: 0;
    border-radius: 14px;
    padding: 10px;
  }

  .pane-title-row {
    margin-bottom: 8px;
  }

  .spareroom-clean-thread {
    max-height: 200px;
    gap: 8px;
    padding: 8px;
  }

  .spareroom-bubble {
    max-width: 100%;
    padding: 10px;
  }

  .spareroom-reply-pane textarea {
    min-height: 150px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.45;
  }

  .spareroom-reply-pane.already-sent textarea {
    min-height: 58px;
    height: 58px;
    color: var(--muted);
  }

  .spareroom-action-bar {
    gap: 6px;
    padding: 8px;
  }

  .spareroom-action-bar button {
    flex: 1 1 130px;
    min-height: 38px;
    border-radius: 10px;
    padding: 8px 10px;
  }
}

@media (max-width: 520px) {
  .topbar {
    gap: 5px;
    padding: 6px 8px;
  }

  .brand h1 {
    font-size: 16px;
  }

  .brand p {
    font-size: 11px;
  }

  .view-tabs {
    gap: 5px;
  }

  .view-tabs button {
    min-height: 31px;
    padding: 4px 7px;
    font-size: 12px;
  }

  .review-module-controls #filters button {
    min-height: 30px;
  }

  .module-control-row button,
  .module-control-row select,
  .module-control-row .toolbar-select,
  .module-control-row .toolbar-search,
  .module-control-row .icon-control,
  .module-control-row .switch-pill {
    min-height: 32px;
  }

  .detail-header {
    padding: 7px 8px;
  }

  .header-avatar {
    width: 34px;
    height: 34px;
  }

  .detail-header h2 {
    font-size: 15px;
  }

  .messages {
    padding: 8px;
  }

  .draft-editor {
    min-height: 70px;
  }

  .spareroom-detail {
    padding: 6px;
  }

  .spareroom-detail-header {
    padding: 6px;
  }

  .spareroom-summary-grid div {
    padding: 5px 7px;
  }

  .spareroom-clean-thread {
    max-height: 185px;
  }
}

@media (max-width: 860px) {
  body:not(:has(.review-page.detail-open:not(.hidden))) {
    background: #f6f8fa;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "views";
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) 12px 9px;
    border-bottom: 1px solid rgba(205, 216, 224, 0.78);
    background: rgba(248, 250, 251, 0.92);
    backdrop-filter: blur(22px) saturate(1.28);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.86), 0 14px 34px rgba(18, 32, 44, 0.08);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    min-width: 0;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .brand h1 {
    font-size: 17px;
    font-weight: 860;
    line-height: 1.12;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .brand p {
    justify-self: end;
    margin: 0 0 1px;
    gap: 6px;
    color: #6d7883;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .state-dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 3px rgba(19, 138, 85, 0.14);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .view-tabs {
    width: calc(100vw - 24px);
    margin-inline: -1px;
    padding: 0 0 3px;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .view-tabs::-webkit-scrollbar {
    display: none;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .view-tabs button {
    flex: 0 0 auto;
    min-height: 38px;
    border-color: rgba(205, 216, 224, 0.78);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #1f2b36;
    font-size: 13px;
    font-weight: 820;
    padding: 7px 13px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 8px 18px rgba(20, 32, 42, 0.05);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .view-tabs button.active {
    border-color: rgba(8, 122, 143, 0.22);
    background: #0a8ea6;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(8, 122, 143, 0.22);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .view-tabs .nav-badge {
    min-width: 21px;
    height: 21px;
    padding: 0 7px;
    font-size: 11px;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-module-controls {
    position: sticky;
    top: 0;
    z-index: 10;
    gap: 10px;
    padding: 9px 12px 10px;
    border-bottom: 1px solid rgba(211, 220, 228, 0.82);
    background: rgba(246, 248, 250, 0.9);
    backdrop-filter: blur(18px) saturate(1.18);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-module-controls #filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 3px;
    border: 1px solid rgba(205, 216, 224, 0.75);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-module-controls #filters::-webkit-scrollbar {
    display: none;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-module-controls #filters button {
    flex: 0 0 auto;
    min-height: 36px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #24313d;
    font-size: 13px;
    font-weight: 820;
    padding: 7px 8px;
    box-shadow: none;
    white-space: nowrap;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-module-controls #filters button.active {
    background: #0a8ea6;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(8, 122, 143, 0.2);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) #reviewHeaderControls {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px auto;
    gap: 8px;
    align-items: center;
    padding: 7px;
    border: 1px solid rgba(205, 216, 224, 0.74);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 28px rgba(20, 32, 42, 0.07);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .toolbar-search,
  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .icon-control,
  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .auto-send-pill {
    border-color: rgba(205, 216, 224, 0.82);
    border-radius: 16px;
    background: rgba(248, 250, 251, 0.9);
    box-shadow: none;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .toolbar-select {
    min-height: 46px;
    border-color: rgba(205, 216, 224, 0.82);
    border-radius: 16px;
    background: rgba(248, 250, 251, 0.9);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .custom-select-button {
    min-height: 44px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    padding: 8px 11px;
    box-shadow: none;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .custom-select-button::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid #647280;
    border-bottom: 2px solid #647280;
    transform: rotate(45deg) translateY(-2px);
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .custom-select-button span:last-child {
    overflow: hidden;
    color: #1f2b36;
    font-size: 14px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .toolbar-search,
  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .select-visible-control {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-controls .auto-send-pill {
    min-height: 46px;
    padding: 0 10px;
    gap: 7px;
    color: #647280;
    font-size: 12px;
    font-weight: 820;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .auto-send-pill input::before {
    background: #0a8ea6;
  }

  body:not(:has(.review-page.detail-open:not(.hidden))) .review-batch-controls {
    display: none;
  }

  body:has(.review-page.detail-open:not(.hidden)) {
    overflow: hidden;
  }

  body:has(.review-page.detail-open:not(.hidden)) .topbar {
    display: none;
  }

  .review-page.detail-open {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .review-page.detail-open .review-layout,
  .review-page.detail-open .detail,
  .review-page.detail-open .panel {
    display: grid;
    width: 100%;
    min-width: 0;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
  }

  .review-page.detail-open .review-layout,
  .review-page.detail-open .detail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .review-page.detail-open .panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: visible;
    background:
      linear-gradient(180deg, rgba(248, 250, 251, 0.98), rgba(244, 246, 248, 0.98)),
      var(--bg);
  }

  .review-page.detail-open .detail-header {
    position: relative;
    top: auto;
    z-index: 8;
    display: grid;
    grid-template-columns: auto 30px minmax(0, 1fr) 34px;
    grid-template-areas:
      "back avatar title refresh"
      "room room room room"
      "assign assign assign assign";
    align-items: center;
    gap: 5px 7px;
    min-height: 0;
    width: 100%;
    min-width: 0;
    padding: max(24px, env(safe-area-inset-top)) 8px 7px;
    border-bottom: 1px solid rgba(220, 227, 233, 0.9);
    background: rgba(248, 250, 251, 0.96);
    box-shadow: 0 8px 18px rgba(20, 32, 42, 0.05);
  }

  .review-page.detail-open .mobile-back {
    grid-area: back;
    min-height: 32px;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 13px;
  }

  .review-page.detail-open .header-avatar {
    grid-area: avatar;
    width: 30px;
    height: 30px;
  }

  .review-page.detail-open .detail-header > div:not(.detail-controls):not(.property-actions) {
    grid-area: title;
    min-width: 0;
  }

  .review-page.detail-open .detail-header h2 {
    overflow: hidden;
    font-size: 15px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .review-page.detail-open .detail-header p {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 4px;
    overflow: hidden;
  }

  .review-page.detail-open .status-pill,
  .review-page.detail-open .detail-header .badge {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 3px 7px;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .review-page.detail-open .detail-controls {
    display: contents;
  }

  .review-page.detail-open .room-code-picker {
    grid-area: room;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .review-page.detail-open .room-code-picker span {
    display: none;
  }

  .review-page.detail-open .lead-assignment-panel {
    grid-area: assign;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) minmax(92px, auto);
    gap: 5px;
    margin: 0;
  }

  .review-page.detail-open .lead-assignment-panel label {
    gap: 0;
  }

  .review-page.detail-open .lead-assignment-panel span {
    display: none;
  }

  .review-page.detail-open .lead-assignment-panel input,
  .review-page.detail-open .lead-assignment-panel button {
    min-height: 34px;
    border-radius: 11px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .review-page.detail-open .lead-assignment-panel .danger {
    grid-column: 1 / -1;
  }

  .review-page.detail-open #threadRoomCode {
    min-height: 36px;
    border-radius: 12px;
    padding: 7px 32px 7px 11px;
    background-color: #ffffff;
    font-size: 14px;
  }

  .review-page.detail-open #refreshDetail {
    grid-area: refresh;
    min-height: 32px;
    width: 34px;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    font-size: 0;
  }

  .review-page.detail-open #refreshDetail::before {
    content: "↻";
    font-size: 18px;
    line-height: 1;
  }

  .review-page.detail-open .property-actions {
    grid-column: 1 / -1;
    margin: 0;
  }

  .review-page.detail-open .messages {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 10px 18px;
    scroll-padding-block: 12px 18px;
    overscroll-behavior: contain;
  }

  .review-page.detail-open .message {
    box-sizing: border-box;
    width: fit-content;
    min-width: 0;
    max-width: min(88%, calc(100% - 46px));
    border-radius: 17px 17px 17px 5px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.35;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  .review-page.detail-open .message-media {
    max-width: 100%;
    border-radius: 14px;
  }

  .review-page.detail-open .message-media img,
  .review-page.detail-open .message-media.video {
    max-height: 260px;
  }

  .review-page.detail-open .message.out {
    align-self: auto;
    margin-left: auto;
    margin-right: 0;
    max-width: min(88%, calc(100% - 46px));
    border-radius: 17px 17px 5px 17px;
    background: #dff5e8;
  }

  .review-page.detail-open .message-text {
    max-width: 100%;
  }

  .review-page.detail-open .message p {
    overflow-wrap: anywhere;
    margin-top: 7px;
    font-size: 11px;
  }

  .review-page.detail-open .composer {
    position: relative;
    bottom: auto;
    z-index: 9;
    display: grid;
    grid-template-rows: auto auto;
    gap: 7px;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 6px 8px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(220, 227, 233, 0.92);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 20px rgba(20, 32, 42, 0.08);
  }

  .review-page.detail-open .composer:has(.more-panel:not(.hidden)) {
    z-index: 120;
    overflow: visible;
    backdrop-filter: none;
  }

  .review-page.detail-open .composer-header {
    display: none;
  }

  .review-page.detail-open .draft-editor {
    min-height: 38px;
    max-height: min(12dvh, 92px);
    border-radius: 15px;
    padding: 8px 11px;
    background: #ffffff;
    font-size: 15px;
    line-height: 1.35;
  }

  .review-page.detail-open .draft-editor:empty::before {
    content: attr(data-placeholder);
    color: #8a97a5;
  }

  .review-page.detail-open .actions {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 0.84fr) minmax(58px, 0.44fr);
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    margin-top: 0;
  }

  .review-page.detail-open .actions > button,
  .review-page.detail-open .more-button,
  .review-page.detail-open .attachment-button {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    border-radius: 11px;
    padding: 5px 6px;
    font-size: 12px;
    white-space: nowrap;
  }

  .review-page.detail-open .attachment-button {
    width: 34px;
    min-width: 34px;
    padding: 0;
    font-size: 19px;
  }

  .review-page.detail-open .more-menu {
    min-width: 0;
  }

  .review-page.detail-open .more-button {
    width: 100%;
  }

  .review-page.detail-open .more-panel {
    position: fixed;
    right: 10px;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 48px);
    left: 10px;
    z-index: 80;
    width: auto;
    max-height: min(72dvh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px;
    padding: 8px;
    transform-origin: bottom right;
    -webkit-overflow-scrolling: touch;
  }

  .review-page.detail-open .more-panel button,
  .review-page.detail-open .more-panel select {
    min-height: 42px;
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .review-page.detail-open .notice {
    grid-column: 1 / -1;
    margin: 0;
  }
}

@media (max-width: 520px) {
  .review-page.detail-open .detail-header {
    grid-template-columns: auto 28px minmax(0, 1fr) 32px;
    padding-inline: 8px;
  }

  .review-page.detail-open .mobile-back {
    min-height: 31px;
    padding-inline: 8px;
  }

  .review-page.detail-open .header-avatar {
    width: 28px;
    height: 28px;
  }

  .review-page.detail-open .detail-header h2 {
    font-size: 14px;
  }

  .review-page.detail-open .messages {
    padding: 8px 8px 12px;
  }

  .review-page.detail-open .message {
    max-width: min(91%, calc(100% - 34px));
    font-size: 14px;
  }

  .review-page.detail-open .composer {
    padding-inline: 8px;
  }

  .review-page.detail-open .draft-editor {
    min-height: 38px;
    max-height: min(14dvh, 96px);
  }

  .review-page.detail-open .actions {
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 0.82fr) minmax(56px, 0.42fr);
  }
}

.tenant-detail-card .tenant-workspace-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
}

.tenant-detail-card .tenant-workspace-tabs button {
  flex: 0 0 auto;
  width: auto;
  justify-content: center;
  white-space: nowrap;
}

.tenant-support-page .tenant-group-list,
.tenant-support-page .tenant-property-list {
  align-items: start;
}

.tenant-support-page .tenant-property-nav-item {
  height: auto;
  align-self: start;
}

@media (max-width: 860px) {
  .tenant-support-page .tenant-group-list,
  .tenant-support-page .tenant-property-list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    max-height: 260px;
    align-items: start;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .tenant-support-page .tenant-property-nav-item,
  .tenant-support-page .tenant-group-card {
    min-height: 118px;
    max-height: 238px;
    align-content: start;
    overflow: hidden;
  }

  .tenant-detail-card .tenant-workspace-tabs {
    padding-inline: 10px;
  }
}

.tenant-support-page .tenant-property-section {
  display: grid;
  min-height: 0;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
}

.tenant-support-page #propertyGroupList.tenant-group-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.tenant-support-page #propertyGroupList > * {
  flex: 0 0 auto;
}

.tenant-support-page .tenant-sidebar-section-header,
.tenant-support-page .tenant-section-title {
  padding: 10px 12px 6px;
}

.tenant-support-page .tenant-sidebar-section-header h2,
.tenant-support-page .tenant-section-title h2 {
  margin-top: 1px;
  font-size: 15px;
  line-height: 1.2;
}

.tenant-support-page .tenant-property-row-list {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  padding: 4px 8px 10px;
}

.tenant-support-page .tenant-property-row,
.tenant-support-page .tenant-property-nav-item,
.tenant-support-page .tenant-property-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  max-height: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 9px 7px 14px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  transform: none;
}

.tenant-support-page .tenant-property-row::before,
.tenant-support-page .tenant-property-nav-item::before,
.tenant-support-page .tenant-property-card::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 4px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}

.tenant-support-page .tenant-property-row:hover,
.tenant-support-page .tenant-property-nav-item:hover,
.tenant-support-page .tenant-property-card:hover {
  border-color: rgba(220, 227, 233, 0.92);
  background: #f8fafb;
  box-shadow: none;
  transform: none;
}

.tenant-support-page .tenant-property-row.selected,
.tenant-support-page .tenant-property-row.active,
.tenant-support-page .tenant-property-nav-item.selected,
.tenant-support-page .tenant-property-nav-item.active,
.tenant-support-page .tenant-property-card.selected,
.tenant-support-page .tenant-property-card.active {
  border-color: rgba(8, 122, 143, 0.18);
  background: #f3fafb;
  box-shadow: none;
}

.spareroom-remote-panel {
  position: fixed;
  inset: 86px 12px 12px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.spareroom-remote-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.spareroom-remote-head h2 {
  font-size: 18px;
}

.spareroom-remote-actions,
.spareroom-remote-type {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.spareroom-remote-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  background: #dfe6eb;
  overflow: auto;
  cursor: crosshair;
}

.spareroom-remote-viewport img {
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
  user-select: none;
}

.spareroom-remote-empty {
  display: grid;
  height: 100%;
  min-height: 320px;
  place-items: center;
  color: var(--muted);
  font-weight: 750;
}

.spareroom-remote-type {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #f8fafb;
}

.spareroom-remote-type input {
  flex: 1 1 260px;
  min-height: 40px;
  padding: 8px 10px;
}

@media (max-width: 760px) {
  .spareroom-remote-panel {
    inset: 8px;
    border-radius: 10px;
  }

  .spareroom-remote-head {
    align-items: flex-start;
    padding: 10px;
  }

  .spareroom-remote-actions button,
  .spareroom-remote-type button {
    min-height: 34px;
    padding: 6px 9px;
  }

  .spareroom-remote-type {
    padding: 8px;
  }
}

.tenant-support-page .tenant-property-row.selected::before,
.tenant-support-page .tenant-property-row.active::before,
.tenant-support-page .tenant-property-nav-item.selected::before,
.tenant-support-page .tenant-property-nav-item.active::before,
.tenant-support-page .tenant-property-card.selected::before,
.tenant-support-page .tenant-property-card.active::before {
  background: var(--accent);
}

.tenant-support-page .tenant-property-row-main,
.tenant-support-page .tenant-property-card > div:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
}

.tenant-support-page .tenant-property-row-main strong,
.tenant-support-page .tenant-property-card strong {
  min-width: 0;
  overflow: hidden;
  color: #1f2933;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-property-row-main p,
.tenant-support-page .tenant-property-row-meta,
.tenant-support-page .tenant-property-card p,
.tenant-support-page .tenant-property-card .tenant-property-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #7b8794;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-property-row-status,
.tenant-support-page .tenant-property-nav-groups {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 3px;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.tenant-support-page .tenant-property-row-main .tenant-property-row-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.tenant-support-page .tenant-property-row-main .tenant-property-row-meta > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-property-row-status .status-pill,
.tenant-support-page .tenant-property-nav-groups .status-pill {
  min-height: 16px;
  border: 1px solid rgba(220, 227, 233, 0.72);
  padding: 1px 5px;
  background: #f4f6f8;
  color: #687684;
  font-size: 9px;
  font-weight: 700;
}

.tenant-support-page .tenant-property-row-status .status-pill.linked,
.tenant-support-page .tenant-property-nav-groups .status-pill.linked {
  background: #eef8f4;
  color: #3f7464;
}

.tenant-support-page .tenant-property-row-status .status-pill.active,
.tenant-support-page .tenant-property-nav-groups .status-pill.active {
  border-color: rgba(8, 122, 143, 0.24);
  background: #e8f6f8;
  color: #087a8f;
}

.tenant-support-page .tenant-property-row-status .status-pill.empty,
.tenant-support-page .tenant-property-nav-groups .status-pill.empty {
  background: #f7f8f9;
  color: #9aa5b1;
}

.tenant-support-page .tenant-unlinked-groups {
  gap: 10px;
  margin: 10px 8px 8px;
  padding: 12px 0 0;
}

.tenant-support-page .tenant-unlinked-groups .tenant-support-intro {
  padding: 0 4px 2px;
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: 112px;
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 10px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(20, 32, 42, 0.06);
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card:hover {
  border-color: rgba(8, 122, 143, 0.22);
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(20, 32, 42, 0.08);
  transform: none;
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card.selected,
.tenant-support-page .tenant-unlinked-groups .tenant-group-card.active {
  border-color: rgba(8, 122, 143, 0.34);
  background:
    linear-gradient(90deg, var(--accent), var(--accent) 4px, transparent 4px),
    #f8fcfd;
  box-shadow: 0 10px 26px rgba(8, 122, 143, 0.10);
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card p {
  -webkit-line-clamp: 2;
  font-size: 12px;
}

.tenant-support-page .tenant-unlinked-groups .property-group-actions {
  justify-content: flex-start;
}

@media (max-width: 860px) {
  .tenant-support-page .tenant-property-row,
  .tenant-support-page .tenant-property-nav-item,
  .tenant-support-page .tenant-property-card {
    min-height: 58px;
    max-height: none;
  }

  .tenant-support-page .tenant-property-row-list {
    max-height: 260px;
    overflow: auto;
  }

  .tenant-support-page .tenant-unlinked-groups .tenant-group-card {
    min-height: 118px;
    max-height: 238px;
    overflow: hidden;
  }
}

.tenant-support-page .tenant-detail-card {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  background: #f7faf9;
}

.tenant-support-page .tenant-detail-header,
.tenant-support-page .tenant-workspace-head {
  min-height: 0;
  padding: 9px 12px;
  border-bottom-color: rgba(220, 227, 233, 0.78);
}

.tenant-support-page .tenant-detail-header h2,
.tenant-support-page .tenant-workspace-head h2 {
  margin-top: 0;
  font-size: 15px;
  line-height: 1.18;
}

.tenant-support-page .tenant-detail-header p,
.tenant-support-page .tenant-workspace-head p {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.25;
}

.tenant-support-page .tenant-detail-header .property-group-actions {
  gap: 5px;
}

.tenant-support-page .tenant-detail-header .property-group-actions button {
  min-height: 28px;
  border-radius: 7px;
  padding: 4px 8px;
}

.tenant-support-page .tenant-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 6px 10px;
  border-bottom-color: rgba(220, 227, 233, 0.72);
  background: #f9fbfb;
}

.tenant-support-page .tenant-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(220, 227, 233, 0.82);
  border-radius: 0;
  padding: 2px 10px 2px 0;
  margin-right: 10px;
  background: transparent;
  color: #344054;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: none;
}

.tenant-support-page .tenant-detail-meta span:last-child {
  border-right: 0;
  margin-right: 0;
}

.tenant-support-page .tenant-detail-meta strong {
  display: inline;
  margin: 0;
  color: #7b8794;
  font-size: 10px;
  font-weight: 750;
}

.tenant-support-page .tenant-detail-meta em {
  display: inline;
}

.tenant-support-page .tenant-group-switcher {
  gap: 2px;
  padding: 6px 10px;
  background: #ffffff;
}

.tenant-support-page .tenant-group-switcher button {
  min-height: 28px;
  max-width: 184px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 4px 8px;
  background: transparent;
  color: #52606d;
  box-shadow: none;
}

.tenant-support-page .tenant-group-switcher button:hover {
  border-color: rgba(220, 227, 233, 0.88);
  background: #f6f8fa;
}

.tenant-support-page .tenant-group-switcher button.active {
  border-color: rgba(8, 122, 143, 0.22);
  background: #e9f7f9;
  color: var(--accent-strong);
}

.tenant-support-page .tenant-group-switcher button.active span,
.tenant-support-page .tenant-group-switcher button.active strong {
  color: var(--accent-strong);
}

.tenant-support-page .tenant-workspace-tabs {
  gap: 2px;
  padding: 5px 10px;
  border-bottom-color: rgba(220, 227, 233, 0.72);
}

.tenant-support-page .tenant-workspace-tabs button {
  min-height: 26px;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 11px;
}

.tenant-support-page .tenant-link-form {
  padding: 7px 10px;
}

.tenant-support-page .tenant-message-panel {
  padding: 8px 10px;
  background: #f2f7f5;
}

.tenant-support-page .tenant-detail-card .tenant-message-panel {
  min-height: 160px;
}

.tenant-support-page .tenant-message-list {
  gap: 6px;
  padding: 0 2px 6px;
}

.tenant-support-page .tenant-message {
  min-width: min(180px, 76%);
  max-width: min(600px, 72%);
  border-color: rgba(220, 227, 233, 0.82);
  border-radius: 12px;
  padding: 7px 9px;
  box-shadow: 0 1px 8px rgba(20, 32, 42, 0.05);
}

.tenant-support-page .tenant-message.admin,
.tenant-support-page .tenant-message.staff,
.tenant-support-page .tenant-message.out {
  align-self: flex-end;
  margin-left: auto;
  border-color: rgba(8, 122, 143, 0.20);
  background: #e8f7f1;
}

.tenant-support-page .tenant-message.tenant,
.tenant-support-page .tenant-message.in {
  margin-right: auto;
  background: #ffffff;
}

.tenant-support-page .tenant-message > strong {
  gap: 6px;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 760;
}

.tenant-support-page .tenant-message > strong em {
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #8792a0;
  font-size: 9px;
  font-weight: 720;
}

.tenant-support-page .tenant-message.admin > strong em,
.tenant-support-page .tenant-message.staff > strong em,
.tenant-support-page .tenant-message.out > strong em {
  background: transparent;
  color: #4f8b7b;
}

.tenant-support-page .tenant-message.tenant > strong em,
.tenant-support-page .tenant-message.in > strong em {
  background: transparent;
  color: #9a6a12;
}

.tenant-support-page .tenant-message p {
  font-size: 12px;
  line-height: 1.38;
}

.tenant-message-quote {
  display: grid;
  gap: 2px;
  border-left: 3px solid rgba(8, 145, 178, 0.72);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
  margin: 4px 0 8px;
  padding: 7px 9px;
  color: #334155;
}

.tenant-message-quote strong {
  color: #047481;
  font-size: 11px;
  font-weight: 850;
}

.tenant-message-quote span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
}

.tenant-message.tenant .tenant-message-quote,
.tenant-message.in .tenant-message-quote {
  border-left-color: rgba(180, 83, 9, 0.72);
  background: rgba(248, 250, 252, 0.92);
}

.tenant-message.tenant .tenant-message-quote strong,
.tenant-message.in .tenant-message-quote strong {
  color: #92400e;
}

.tenant-support-page .tenant-message small {
  margin-top: 5px;
  font-size: 10px;
}

.message-sender-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  padding: 0;
  cursor: pointer;
}

.message-sender-button:hover {
  text-decoration: underline;
}

.lead-message-sender {
  display: block;
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

.message-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.message:hover .message-actions,
.tenant-message:hover .message-actions,
.message:focus-within .message-actions,
.tenant-message:focus-within .message-actions {
  opacity: 1;
  transform: translateY(0);
}

.message-actions button {
  border: 1px solid rgba(8, 145, 178, 0.18);
  background: rgba(255, 255, 255, 0.86);
  color: #075985;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.message-actions button:hover {
  background: #ecfeff;
  border-color: rgba(8, 145, 178, 0.34);
}

.quoted-reply-preview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: center;
  border-left: 3px solid #0891b2;
  background: #ecfeff;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  color: #0f172a;
}

.quoted-reply-preview span {
  font-size: 0.76rem;
  color: #0f766e;
}

.quoted-reply-preview p {
  grid-column: 1 / -1;
  margin: 0;
  color: #334155;
  font-size: 0.82rem;
  line-height: 1.35;
}

.quoted-reply-preview button {
  border: 0;
  background: transparent;
  color: #0f766e;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}

.tenant-reply-form.drag-over,
.composer.drag-over {
  outline: 2px dashed #0891b2;
  outline-offset: -6px;
  background: rgba(236, 254, 255, 0.72);
}

.app-confirm-message {
  white-space: pre-line;
}

.contact-detail-list {
  display: grid;
  gap: 8px;
}

.contact-detail-list button {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.contact-detail-list button:hover {
  border-color: rgba(8, 145, 178, 0.42);
  background: #ecfeff;
}

.contact-detail-list span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.contact-detail-list strong {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.contact-detail-list em {
  color: #0891b2;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.tenant-support-page .tenant-loading-card {
  align-self: center;
  margin: auto;
  min-width: min(320px, 100%);
  text-align: center;
}

.tenant-support-page .tenant-reply-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 8px 10px;
  border-top-color: rgba(220, 227, 233, 0.82);
  box-shadow: 0 -6px 16px rgba(20, 32, 42, 0.05);
}

.tenant-support-page .tenant-reply-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 156px);
  align-items: start;
  gap: 8px;
  position: relative;
}

.tenant-mention-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: min(420px, 92vw);
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid rgba(220, 227, 233, 0.94);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(20, 32, 42, 0.22);
  padding: 6px;
}

.tenant-mention-picker.hidden {
  display: none;
}

.tenant-mention-picker button {
  align-items: center;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  padding: 6px 8px;
  text-align: left;
}

.tenant-mention-picker button:hover,
.tenant-mention-picker button:focus {
  background: #f2f7f8;
  box-shadow: none;
  transform: none;
}

.tenant-mention-picker button span:last-child {
  display: grid;
  min-width: 0;
}

.tenant-mention-picker strong,
.tenant-mention-picker em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-mention-picker strong {
  font-size: 13px;
}

.tenant-mention-picker em,
.tenant-mention-picker p {
  color: #6a7785;
  font-size: 11px;
  font-style: normal;
}

.tenant-mention-avatar {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #dff6f3;
  color: #087a8f;
  font-size: 13px;
  font-weight: 850;
}

.tenant-mention-avatar.group {
  background: #eef3f6;
  color: #52606d;
  font-size: 15px;
}

.tenant-support-page .tenant-reply-input textarea {
  min-height: 102px;
  max-height: 220px;
  border-radius: 8px;
  padding: 10px 11px;
  font-size: 13px;
  line-height: 1.42;
}

.tenant-support-page .tenant-reply-form.response-expanded .tenant-reply-input textarea {
  min-height: 260px;
  max-height: 360px;
}

.tenant-support-page .tenant-attachment-field {
  display: grid;
  gap: 4px;
  color: #344054;
  font-size: 11px;
  font-weight: 760;
}

.lead-ai-context-field,
.tenant-support-page .tenant-ai-context-field {
  display: grid;
  gap: 4px;
  width: min(100%, 1118px);
  margin: 0 auto;
  color: #344054;
  font-size: 11px;
  font-weight: 760;
}

.lead-ai-context-field {
  margin-top: 8px;
}

.lead-ai-context-field span,
.tenant-support-page .tenant-ai-context-field span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lead-ai-context-field em,
.tenant-support-page .tenant-ai-context-field em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.lead-ai-context-field input,
.tenant-support-page .tenant-ai-context-field input {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 10px;
  color: var(--text);
  font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.lead-ai-context-field input:focus,
.tenant-support-page .tenant-ai-context-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 122, 143, 0.14);
  outline: none;
}

.tenant-support-page .tenant-reply-input input[type="file"] {
  width: 100%;
  min-height: 28px;
  border-style: solid;
  border-color: rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  padding: 2px 5px;
  background: #f8fafb;
  color: #687684;
  font-size: 10px;
}

.tenant-support-page .tenant-reply-input input[type="file"]::file-selector-button {
  min-height: 21px;
  margin-right: 5px;
  border: 1px solid rgba(203, 215, 224, 0.95);
  border-radius: 6px;
  background: #ffffff;
  color: #344054;
  font-weight: 740;
  padding: 2px 5px;
}

.tenant-support-page .tenant-reply-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.tenant-support-page .tenant-reply-form button {
  min-height: 29px;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.tenant-support-page .tenant-reply-form button.primary {
  margin-left: auto;
  min-height: 32px;
  padding-inline: 12px;
}

.tenant-knowledge-panel {
  position: absolute;
  bottom: 42px;
  left: 10px;
  z-index: 100;
  width: 280px;
  overflow: visible;
  border: 1px solid rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  padding: 5px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(20, 32, 42, 0.18);
}

.tenant-knowledge-searchbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 3px 3px 7px;
}

.tenant-knowledge-searchbar input {
  min-width: 0;
  min-height: 30px;
  border: 1px solid #d5e0e8;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 12px;
}

.tenant-knowledge-searchbar span {
  color: #607181;
  font-size: 10px;
  font-weight: 760;
  white-space: nowrap;
}

.tenant-floating-menu {
  position: relative;
  display: grid;
  gap: 2px;
  overflow-y: visible;
  overflow-x: visible;
  padding: 0;
}

.tenant-menu-item {
  position: relative;
}

.tenant-menu-trigger {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
  padding: 5px 7px;
  text-align: left;
  font-size: 12px;
  font-weight: 780;
}

.tenant-menu-trigger::after {
  content: "›";
  color: #8792a0;
  font-size: 15px;
  line-height: 1;
}

.tenant-menu-trigger:hover,
.tenant-menu-item:focus-within > .tenant-menu-trigger,
.tenant-menu-item:hover > .tenant-menu-trigger {
  background: #eaf8fb;
  color: #08748a;
}

.tenant-menu-trigger em {
  display: inline-grid;
  min-width: 20px;
  min-height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #e9eef2;
  color: #607181;
  font-size: 10px;
  font-style: normal;
}

.tenant-submenu {
  position: absolute;
  top: auto;
  bottom: -5px;
  left: calc(100% + 4px);
  z-index: 110;
  display: none;
  width: 236px;
  overflow-y: visible;
  overflow-x: visible;
  border: 1px solid rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  padding: 5px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(20, 32, 42, 0.16);
}

.tenant-menu-item:hover > .tenant-submenu,
.tenant-menu-item:focus-within > .tenant-submenu {
  display: grid;
  gap: 3px;
}

.tenant-response-flyout {
  width: 330px;
  max-height: min(420px, calc(100vh - 170px));
  overflow-y: auto;
  gap: 5px;
}

.tenant-response-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.tenant-knowledge-card {
  position: relative;
}

.tenant-knowledge-card > button:first-child {
  width: 100%;
  min-height: 50px;
  align-items: flex-start;
  border: 1px solid rgba(220, 227, 233, 0.92);
  background: #f8fafb;
  padding: 8px 9px;
  text-align: left;
}

.tenant-knowledge-card > button:first-child:hover {
  border-color: #7ac7d9;
  background: #f0fbfd;
}

.tenant-knowledge-card strong,
.tenant-knowledge-card span {
  display: block;
}

.tenant-knowledge-card strong {
  color: #1f2937;
  font-size: 12px;
}

.tenant-knowledge-card span {
  display: -webkit-box;
  max-height: 36px;
  margin-top: 4px;
  overflow: hidden;
  color: #344054;
  font-size: 11px;
  font-weight: 560;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tenant-knowledge-card em {
  display: inline-flex;
  margin-top: 7px;
  border-radius: 999px;
  background: #e0f6f8;
  color: #08748a;
  padding: 3px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
}

.tenant-response-remove {
  margin-top: 4px;
  min-height: 24px;
  color: #9a3412;
}

.tenant-support-page .tenant-unlinked-groups {
  gap: 6px;
  margin: 7px 8px 8px;
  padding-top: 8px;
}

.tenant-support-page .tenant-unlinked-groups .tenant-support-intro {
  padding: 0 2px;
}

.tenant-support-page .tenant-unlinked-groups .tenant-support-intro h2 {
  font-size: 13px;
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card {
  gap: 7px;
  min-height: 0;
  border-color: rgba(220, 227, 233, 0.78);
  border-radius: 8px;
  padding: 8px;
  box-shadow: none;
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card:hover,
.tenant-support-page .tenant-unlinked-groups .tenant-group-card.selected,
.tenant-support-page .tenant-unlinked-groups .tenant-group-card.active {
  box-shadow: none;
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card strong {
  font-size: 12px;
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card p {
  -webkit-line-clamp: 1;
  margin: 0;
  font-size: 11px;
}

.tenant-support-page .tenant-unlinked-groups .tenant-group-card small {
  font-size: 10px;
  font-weight: 620;
}

.tenant-support-page .tenant-unlinked-groups .property-group-actions {
  gap: 4px;
}

.tenant-support-page .tenant-unlinked-groups .property-group-actions button {
  min-height: 24px;
  border-color: rgba(220, 227, 233, 0.88);
  border-radius: 6px;
  padding: 2px 6px;
  background: #f8fafb;
  color: #5f6f7f;
  font-size: 10px;
  font-weight: 720;
}

.tenant-support-page .tenant-support-group-section {
  gap: 6px;
  margin: 0 8px 8px;
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
}

.tenant-support-page .tenant-support-group-section .tenant-support-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  padding: 0 4px 2px;
}

.tenant-support-page .tenant-support-group-section .tenant-support-intro .composer-kicker {
  grid-column: 1;
}

.tenant-support-page .tenant-support-group-section .tenant-support-intro h2 {
  grid-column: 1;
  font-size: 13px;
}

.tenant-support-page .tenant-support-group-section .tenant-support-intro em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 22px;
  border-radius: 999px;
  padding: 2px 7px;
  background: #edf2f7;
  color: #52606d;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.tenant-support-page .tenant-support-group-section .tenant-group-card {
  gap: 8px;
  min-height: 0;
  border-color: rgba(220, 227, 233, 0.78);
  border-radius: 8px;
  padding: 8px;
  box-shadow: none;
}

.tenant-support-page .tenant-support-task-section {
  gap: 7px;
}

.tenant-support-page .tenant-support-task-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.tenant-support-page .tenant-task-sidebar {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
}

.tenant-support-page .tenant-task-sidebar-summary,
.tenant-support-page .tenant-task-sidebar-hint,
.tenant-support-page .tenant-task-sidebar-statuses span {
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.tenant-support-page .tenant-task-sidebar-summary {
  display: grid;
  gap: 3px;
}

.tenant-support-page .tenant-task-sidebar-summary strong {
  color: #1f2933;
  font-size: 18px;
  line-height: 1.1;
}

.tenant-support-page .tenant-task-sidebar-summary small,
.tenant-support-page .tenant-task-sidebar-hint {
  color: #52606d;
  font-size: 12px;
  line-height: 1.35;
}

.tenant-support-page .tenant-task-sidebar-statuses {
  display: grid;
  gap: 6px;
}

.tenant-support-page .tenant-task-sidebar-statuses span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.tenant-support-page .tenant-task-sidebar-statuses strong {
  overflow: hidden;
  color: #27333f;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-sidebar-statuses em {
  display: inline-grid;
  min-width: 22px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #edf2f7;
  color: #52606d;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.tenant-support-page .tenant-task-manager {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #f6f8fa;
}

.tenant-support-page .tenant-task-manager-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.9);
  background: #ffffff;
  padding: 12px;
}

.tenant-support-page .tenant-task-header-tools {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 0;
}

.tenant-support-page .tenant-task-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(203, 215, 224, 0.92);
  border-radius: 10px;
  background: #f7fafb;
  padding: 3px;
}

.tenant-support-page .tenant-task-view-switch button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #607181;
  box-shadow: none;
  font-size: 11px;
  font-weight: 850;
  padding: 5px 10px;
}

.tenant-support-page .tenant-task-view-switch button.active {
  background: #ffffff;
  color: #075f70;
  box-shadow: 0 1px 3px rgba(20, 32, 42, 0.12);
}

.tenant-support-page .tenant-task-manager-head,
.tenant-support-page .tenant-task-manager-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.55fr) 132px minmax(150px, 0.85fr) minmax(220px, 1fr) minmax(130px, 0.75fr) 118px;
  gap: 10px;
  align-items: stretch;
}

.tenant-support-page .tenant-task-manager-head {
  border-bottom: 1px solid rgba(220, 227, 233, 0.9);
  background: #fbfcfd;
  padding: 8px 12px;
  color: #697586;
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
}

.tenant-support-page .tenant-task-manager-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 18px;
}

.tenant-support-page .tenant-task-manager-row {
  border: 1px solid rgba(220, 227, 233, 0.96);
  border-left: 3px solid #087a8f;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 1px 2px rgba(20, 32, 42, 0.04);
}

.tenant-support-page .tenant-task-manager-row.order {
  border-left-color: #8a6f20;
}

.tenant-support-page .tenant-task-manager-main,
.tenant-support-page .tenant-task-manager-cell,
.tenant-support-page .tenant-task-manager-actions {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.tenant-support-page .tenant-task-manager-main .badge {
  width: fit-content;
}

.tenant-support-page .tenant-task-manager-main h3 {
  margin: 0;
  color: #1f2933;
  font-size: 13px;
  line-height: 1.25;
}

.tenant-support-page .tenant-task-manager-main p,
.tenant-support-page .tenant-task-manager-cell span {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #52606d;
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.tenant-support-page .tenant-task-manager-cell strong {
  color: #7b8794;
  font-size: 9px;
  font-weight: 820;
  text-transform: uppercase;
}

.tenant-support-page .tenant-task-manager-cell select,
.tenant-support-page .tenant-task-manager-actions button {
  width: 100%;
  min-height: 30px;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
}

.tenant-support-page .tenant-task-manager-cell select {
  background: #ffffff;
}

.tenant-support-page .tenant-task-manager-cell a {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}

.tenant-support-page .tenant-task-manager-actions button {
  border-color: rgba(8, 122, 143, 0.22);
  background: #f7fbfc;
  color: #0d6675;
  box-shadow: none;
}

.tenant-support-page .tenant-task-manager-actions button:hover {
  background: #e8f8fb;
  transform: none;
}

.tenant-task-kanban {
  display: grid;
  grid-auto-columns: minmax(260px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 12px 18px;
}

.tenant-task-kanban-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border: 1px solid rgba(220, 227, 233, 0.96);
  border-radius: 10px;
  background: #eef3f5;
  overflow: hidden;
}

.tenant-task-kanban-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.9);
  background: #ffffff;
  padding: 9px 10px;
}

.tenant-task-kanban-column header strong {
  color: #24313d;
  font-size: 12px;
}

.tenant-task-kanban-column header em {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #e8eef3;
  color: #52616f;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.tenant-task-kanban-column > div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.tenant-task-kanban-column > div > p {
  margin: 0;
  border: 1px dashed #cbd8e3;
  border-radius: 8px;
  color: #7b8794;
  font-size: 12px;
  font-weight: 750;
  padding: 12px;
  text-align: center;
}

.tenant-task-calendar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px 18px;
}

.tenant-task-calendar > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(220, 227, 233, 0.96);
  border-radius: 10px 10px 0 0;
  background: #ffffff;
  padding: 10px 12px;
}

.tenant-task-calendar h3 {
  margin: 2px 0 0;
  color: #1f2933;
  font-size: 16px;
}

.tenant-task-calendar small {
  color: #697586;
  font-size: 11px;
  font-weight: 750;
}

.tenant-task-calendar-weekdays,
.tenant-task-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
}

.tenant-task-calendar-weekdays {
  border-inline: 1px solid rgba(220, 227, 233, 0.96);
  background: #f7fafb;
}

.tenant-task-calendar-weekdays span {
  border-right: 1px solid rgba(220, 227, 233, 0.96);
  color: #697586;
  font-size: 10px;
  font-weight: 850;
  padding: 7px 8px;
  text-transform: uppercase;
}

.tenant-task-calendar-grid {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(220, 227, 233, 0.96);
  border-top: 0;
  background: #ffffff;
}

.tenant-task-calendar-day {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 118px;
  border-right: 1px solid rgba(237, 241, 245, 0.96);
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
  padding: 8px;
}

.tenant-task-calendar-day.muted {
  background: #f8fafb;
}

.tenant-task-calendar-day > strong {
  color: #1f2933;
  font-size: 12px;
}

.tenant-task-calendar-day button {
  display: grid;
  gap: 1px;
  min-height: 0;
  border: 1px solid rgba(8, 122, 143, 0.16);
  border-radius: 7px;
  background: #f1fbfd;
  box-shadow: none;
  padding: 5px 6px;
  text-align: left;
}

.tenant-task-calendar-day button span {
  color: #08748a;
  font-size: 9px;
  font-weight: 880;
}

.tenant-task-calendar-day button em {
  overflow: hidden;
  color: #24313d;
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-card {
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: 8px;
  padding: 9px;
  background: #ffffff;
  box-shadow: none;
}

.tenant-support-page .tenant-task-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tenant-support-page .tenant-task-card h3 {
  margin: 7px 0 4px;
  font-size: 13px;
}

.tenant-support-page .tenant-task-card p {
  margin: 0 0 6px;
  color: #52606d;
  font-size: 12px;
  line-height: 1.35;
}

.tenant-support-page .tenant-task-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}

.tenant-support-page .tenant-task-detail-grid > span,
.tenant-support-page .tenant-task-product-link {
  min-width: 0;
  border: 1px solid rgba(220, 227, 233, 0.82);
  border-radius: 7px;
  padding: 6px 7px;
  background: #fbfcfd;
}

.tenant-support-page .tenant-task-detail-grid strong {
  display: block;
  margin-bottom: 2px;
  color: #6b7785;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.tenant-support-page .tenant-task-detail-grid em,
.tenant-support-page .tenant-task-product small {
  display: block;
  overflow-wrap: anywhere;
  color: #27333f;
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}

.tenant-support-page .tenant-task-product small + small {
  margin-top: 2px;
}

.tenant-support-page .tenant-task-product-link {
  display: flex;
  align-items: center;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.tenant-support-page .tenant-reply-actions [data-tenant-ai-task],
.tenant-support-page .tenant-reply-actions [data-tenant-maintenance-notice],
.tenant-support-page .tenant-reply-actions [data-tenant-forward-maintenance] {
  border-color: rgba(8, 122, 143, 0.22);
  background: #f7fbfc;
  color: #0d6675;
}

.maintenance-forward-card {
  width: 100%;
  max-height: min(520px, calc(100vh - 230px));
  overflow: auto;
  border: 1px solid #d9e6ed;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(20, 32, 42, 0.12);
}

.maintenance-forward-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e6edf2;
  padding: 13px 15px 11px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
}

.maintenance-forward-head span,
.maintenance-section-title span {
  color: #08748a;
  font-size: 11px;
  font-weight: 860;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.maintenance-forward-head h2 {
  margin: 3px 0 2px;
  color: #111827;
  font-size: 18px;
  line-height: 1.1;
}

.maintenance-forward-head p {
  margin: 0;
  color: #607181;
  font-size: 13px;
  font-weight: 650;
}

.maintenance-forward-head button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #dce7ee;
  border-radius: 999px;
  background: #ffffff;
  color: #344054;
  font-size: 22px;
  line-height: 1;
}

.maintenance-forward-card form {
  display: grid;
  gap: 0;
}

.maintenance-forward-card label {
  display: grid;
  gap: 6px;
  color: #5b6b7c;
  font-size: 12px;
  font-weight: 760;
}

.maintenance-forward-section {
  display: grid;
  gap: 10px;
  border-bottom: 1px solid #edf2f6;
  padding: 12px 15px;
}

.maintenance-forward-grid {
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 12px;
}

.maintenance-forward-card input,
.maintenance-forward-card select,
.maintenance-forward-card textarea {
  width: 100%;
  border: 1px solid #d5e0e8;
  border-radius: 8px;
  padding: 8px 10px;
  color: #111827;
  font: inherit;
}

.maintenance-forward-card input:focus,
.maintenance-forward-card select:focus,
.maintenance-forward-card textarea:focus {
  border-color: #1a9bb0;
  box-shadow: 0 0 0 3px rgba(26, 155, 176, 0.12);
  outline: 0;
}

.maintenance-forward-card textarea {
  min-height: 90px;
  max-height: 160px;
  resize: vertical;
}

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

.maintenance-section-title strong {
  display: block;
  margin-top: 2px;
  color: #111827;
  font-size: 14px;
}

.maintenance-include-media {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
  border: 1px solid #dce7ee;
  border-radius: 999px;
  background: #ffffff;
  padding: 6px 10px;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
}

.maintenance-include-media input {
  width: auto;
}

.maintenance-media-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  max-height: 210px;
  overflow: auto;
  border: 1px solid #e6edf2;
  border-radius: 10px;
  padding: 10px;
  background: #f7fafb;
}

.maintenance-media-option {
  position: relative;
  display: block;
  border: 1px solid #dde7ee;
  border-radius: 10px;
  background: #ffffff;
  padding: 7px;
}

.maintenance-media-option input {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  width: auto;
  accent-color: #0d95a8;
}

.maintenance-media-option em {
  display: block;
  min-height: 28px;
  margin-top: 6px;
  color: #607181;
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
}

.maintenance-media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: #eef3f6;
}

.maintenance-media-thumb img,
.maintenance-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maintenance-media-thumb span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.8);
  color: #ffffff;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 800;
}

.maintenance-forward-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #edf2f6;
  padding: 11px 15px;
  background: #ffffff;
}

.maintenance-forward-footer button {
  min-height: 36px;
  border-radius: 8px;
  padding: 7px 13px;
}

@media (max-width: 680px) {
  .maintenance-forward-grid {
    grid-template-columns: 1fr;
  }

  .maintenance-section-title {
    align-items: flex-start;
    flex-direction: column;
  }
}

.tenant-support-page .tenant-group-card-main strong,
.tenant-support-page .tenant-support-group-section .tenant-group-card strong {
  overflow: visible;
  color: #1f2933;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tenant-support-page .tenant-group-card-main p {
  -webkit-line-clamp: 2;
  margin: 0;
  font-size: 11px;
}

.tenant-support-page .tenant-group-card-main small {
  font-size: 10px;
  font-weight: 620;
}

.tenant-support-page .tenant-group-card-tools {
  gap: 6px;
}

.tenant-support-page .tenant-group-card-tools select,
.tenant-support-page .tenant-group-card-tools input {
  border: 1px solid rgba(203, 215, 224, 0.95);
  border-radius: 7px;
  padding: 4px 7px;
}

.tenant-support-page .tenant-section-empty {
  margin: 0;
  padding: 8px;
  font-size: 11px;
}

.tenant-knowledge-topic-list {
  gap: 7px;
}

.tenant-knowledge-topic-list button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(203, 215, 224, 0.92);
  border-radius: 9px;
  background: #ffffff;
  color: #1f2937;
  padding: 9px 10px;
  text-align: left;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.tenant-knowledge-topic-list button:hover,
.tenant-knowledge-topic-list button.active {
  border-color: rgba(8, 122, 143, 0.32);
  background: #eaf8fb;
  color: #075f70;
}

.tenant-knowledge-topic-list button span {
  display: inline-grid;
  min-width: 24px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #e9eef2;
  color: #607181;
  font-size: 11px;
}

.knowledge-manager-card {
  grid-template-rows: auto minmax(0, 1fr);
}

.knowledge-manager-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
  background: rgba(255, 255, 255, 0.72);
}

.knowledge-manager-toolbar input,
.knowledge-manager-toolbar select {
  min-width: 0;
  height: 36px;
}

.knowledge-manager-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.knowledge-manager-body {
  display: grid;
  grid-template-columns: minmax(460px, 1fr) minmax(300px, 360px);
  gap: 12px;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

.knowledge-response-panel,
.knowledge-form-panel {
  min-width: 0;
  min-height: 0;
}

.knowledge-response-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.knowledge-manager-form,
.knowledge-response-card {
  border: 1px solid rgba(203, 215, 224, 0.92);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(20, 32, 42, 0.06);
}

.knowledge-manager-form {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 12px;
}

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

.knowledge-form-head h3 {
  margin: 2px 0 0;
  font-size: 16px;
}

.knowledge-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.knowledge-manager-form label {
  display: grid;
  gap: 5px;
  color: #697586;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.knowledge-manager-form input,
.knowledge-manager-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  text-transform: none;
}

.knowledge-manager-form textarea {
  height: auto;
  min-height: 0;
  resize: vertical;
  line-height: 1.45;
}

.knowledge-manager-form label:has(textarea) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  min-height: 0;
}

.knowledge-manager-form label:has(textarea) textarea {
  min-height: 360px;
}

.knowledge-response-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 2px 0 0;
}

.knowledge-response-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 11px 12px;
}

.knowledge-response-card strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.knowledge-response-card span {
  display: block;
  margin-top: 3px;
  color: #697586;
  font-size: 11px;
  font-weight: 800;
}

.knowledge-response-card p {
  margin: 7px 0 0;
  color: #344054;
  font-size: 12px;
  line-height: 1.35;
}

.learning-review-card {
  overflow: hidden;
}

.learning-review-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

.learning-candidate-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 12px;
  border: 1px solid rgba(203, 215, 224, 0.92);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(20, 32, 42, 0.06);
  padding: 12px;
}

.learning-candidate-context,
.learning-approve-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.learning-candidate-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

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

.learning-candidate-head span {
  border-radius: 999px;
  background: #e7f8fa;
  color: #067684;
  font-size: 11px;
  font-weight: 850;
  padding: 4px 8px;
}

.learning-candidate-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.learning-candidate-card label {
  display: grid;
  gap: 5px;
  color: #697586;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.learning-candidate-card input,
.learning-candidate-card select,
.learning-candidate-card textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  text-transform: none;
}

.learning-candidate-card textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
}

.learning-candidate-context label:last-child textarea {
  min-height: 150px;
}

.learning-approve-form button {
  align-self: end;
}

@media (max-width: 820px) {
  .knowledge-manager-toolbar {
    grid-template-columns: 1fr;
  }

  .learning-candidate-card {
    grid-template-columns: 1fr;
  }
}

.tenant-support-page:not(.hidden) {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px 12px;
}

.tenant-support-page:not(.hidden) .tenant-support-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
  grid-template-columns: 370px minmax(0, 1fr);
  align-self: stretch;
  justify-self: stretch;
}

.tenant-support-page:not(.hidden) .tenant-support-sidebar,
.tenant-support-page:not(.hidden) .tenant-support-detail {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.tenant-support-page:not(.hidden) .tenant-support-detail {
  display: grid;
  align-self: stretch;
}

.tenant-support-page:not(.hidden) .tenant-detail-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.tenant-support-page:not(.hidden) .tenant-message-panel {
  min-height: 0;
  overflow: hidden;
  display: grid;
  align-items: stretch;
}

.tenant-support-page:not(.hidden) .tenant-message-list {
  width: min(100%, 940px);
  min-height: 0;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.tenant-support-page:not(.hidden) .tenant-message {
  max-width: min(600px, 72%);
}

.tenant-support-page:not(.hidden) .tenant-message.tenant,
.tenant-support-page:not(.hidden) .tenant-message.in {
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.tenant-support-page:not(.hidden) .tenant-message.admin,
.tenant-support-page:not(.hidden) .tenant-message.staff,
.tenant-support-page:not(.hidden) .tenant-message.out {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}

.tenant-support-page:not(.hidden) .tenant-media-link {
  max-width: min(420px, 100%);
}

.tenant-support-page:not(.hidden) .tenant-media-link.video {
  width: min(420px, 100%);
  max-height: 300px;
  border-radius: 12px;
  object-fit: cover;
}

.tenant-support-page:not(.hidden) .tenant-reply-form {
  flex: 0 0 auto;
}

.tenant-support-page:not(.hidden) .tenant-reply-input {
  grid-template-columns: minmax(0, 940px) 170px;
  justify-content: center;
}

.tenant-support-page:not(.hidden) .tenant-reply-actions {
  width: min(100%, 1118px);
  margin: 0 auto;
}

.tenant-support-page:not(.hidden) .tenant-knowledge-panel {
  left: max(10px, calc((100% - 1118px) / 2));
}

.tenant-mobile-back {
  display: none;
}

.tenant-support-page:not(.hidden) .tenant-group-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tenant-support-page .tenant-task-board,
.tenant-support-page .tenant-support-task-section {
  --task-column-width: 292px;
  --task-board-gap: 10px;
  min-height: 0;
  margin: 0;
  border: 0;
  background: #f6f8fa;
}

.tenant-support-page .tenant-task-board {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.tenant-support-page .tenant-task-board-header,
.tenant-support-page .tenant-task-board-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.9);
  background: #ffffff;
}

.tenant-support-page .tenant-task-board-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.tenant-support-page .tenant-task-board-title span,
.tenant-support-page .tenant-task-board-kicker,
.tenant-support-page .tenant-task-stat span,
.tenant-support-page .tenant-task-column-header span,
.tenant-support-page .tenant-task-card-label {
  color: #697586;
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.tenant-support-page .tenant-task-board-title h2,
.tenant-support-page .tenant-task-board-title h3 {
  overflow: hidden;
  color: #1f2933;
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-board-title p {
  overflow: hidden;
  color: #697586;
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-board-controls,
.tenant-support-page .tenant-task-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.tenant-support-page .tenant-task-board-controls button,
.tenant-support-page .tenant-task-controls button,
.tenant-support-page .tenant-task-board-controls select,
.tenant-support-page .tenant-task-controls select {
  min-height: 30px;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
}

.tenant-support-page .tenant-task-board-controls button.active,
.tenant-support-page .tenant-task-controls button.active {
  border-color: rgba(8, 122, 143, 0.38);
  background: #e8f8fb;
  color: #075f70;
  box-shadow: none;
}

.tenant-support-page .tenant-task-stats,
.tenant-support-page .tenant-task-board-stats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(237, 241, 245, 0.96);
  background: #fbfcfd;
  scrollbar-width: thin;
}

.tenant-support-page .tenant-task-stat {
  display: grid;
  flex: 0 0 auto;
  min-width: 112px;
  gap: 2px;
  border: 1px solid rgba(220, 227, 233, 0.86);
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 9px;
}

.tenant-support-page .tenant-task-stat strong {
  color: #1f2933;
  font-size: 18px;
  line-height: 1.05;
}

.tenant-support-page .tenant-task-stat.active {
  border-color: rgba(8, 122, 143, 0.28);
  background: #f1fbfd;
}

.tenant-support-page .tenant-task-columns,
.tenant-support-page .tenant-kanban-columns {
  display: grid;
  grid-auto-columns: minmax(252px, var(--task-column-width));
  grid-auto-flow: column;
  gap: var(--task-board-gap);
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  scrollbar-width: thin;
}

.tenant-support-page .tenant-support-task-section {
  display: grid;
  grid-auto-columns: minmax(252px, var(--task-column-width));
  grid-auto-flow: column;
  align-items: start;
  align-content: stretch;
  gap: var(--task-board-gap);
  min-height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  scrollbar-width: thin;
}

.tenant-support-page .tenant-task-column,
.tenant-support-page .tenant-kanban-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 220px;
  max-height: 100%;
  border: 1px solid rgba(220, 227, 233, 0.9);
  border-radius: 8px;
  background: #eef3f5;
  overflow: hidden;
}

.tenant-support-page .tenant-task-column-header,
.tenant-support-page .tenant-kanban-column-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.9);
  background: #ffffff;
}

.tenant-support-page .tenant-task-column-header strong,
.tenant-support-page .tenant-kanban-column-header strong {
  overflow: hidden;
  color: #24313d;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-column-header em,
.tenant-support-page .tenant-kanban-column-header em {
  display: inline-grid;
  min-width: 22px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #edf2f7;
  color: #52606d;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.tenant-support-page .tenant-task-column-body,
.tenant-support-page .tenant-kanban-column-body {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.tenant-support-page .tenant-support-task-section .tenant-task-card,
.tenant-support-page .tenant-task-column .tenant-task-card,
.tenant-support-page .tenant-kanban-column .tenant-task-card {
  align-self: start;
  min-width: 0;
  max-height: calc(100dvh - 190px);
  overflow: hidden;
  border-color: rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 32, 42, 0.04);
}

.tenant-support-page .tenant-task-card:hover {
  border-color: rgba(8, 122, 143, 0.24);
  box-shadow: 0 8px 18px rgba(20, 32, 42, 0.08);
}

.tenant-support-page .tenant-task-card.repair,
.tenant-support-page .tenant-task-card[data-task-type="repair"] {
  border-left: 3px solid #087a8f;
}

.tenant-support-page .tenant-task-card.order,
.tenant-support-page .tenant-task-card[data-task-type="order"] {
  border-left: 3px solid #8a6f20;
}

.tenant-support-page .tenant-task-card-head {
  min-width: 0;
}

.tenant-support-page .tenant-task-card-head .badge,
.tenant-support-page .tenant-task-card-head .status-pill {
  min-height: 18px;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 780;
}

.tenant-support-page .tenant-task-card-head .badge {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tenant-support-page .tenant-task-card-head .status-pill,
.tenant-support-page .tenant-task-card .status-pill.open,
.tenant-support-page .tenant-task-card .status-pill.repair,
.tenant-support-page .tenant-task-card .status-pill.order {
  border: 1px solid rgba(8, 122, 143, 0.16);
  background: #eaf8fb;
  color: #075f70;
}

.tenant-support-page .tenant-task-card .status-pill.pending,
.tenant-support-page .tenant-task-card .status-pill.todo,
.tenant-support-page .tenant-task-card .status-pill.new {
  border-color: rgba(184, 117, 3, 0.16);
  background: #fff6e5;
  color: #8a5500;
}

.tenant-support-page .tenant-task-card .status-pill.done,
.tenant-support-page .tenant-task-card .status-pill.complete,
.tenant-support-page .tenant-task-card .status-pill.completed {
  border-color: rgba(19, 138, 85, 0.18);
  background: #e8f7ef;
  color: #11683f;
}

.tenant-support-page .tenant-task-card h3 {
  display: -webkit-box;
  margin: 7px 0 3px;
  overflow: hidden;
  color: #1f2933;
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tenant-support-page .tenant-task-card p {
  display: -webkit-box;
  margin: 0 0 7px;
  overflow: hidden;
  color: #52606d;
  font-size: 11px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.tenant-support-page .tenant-task-detail-grid,
.tenant-support-page .tenant-task-meta,
.tenant-support-page .tenant-task-card-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 7px 0;
}

.tenant-support-page .tenant-task-detail-grid > span,
.tenant-support-page .tenant-task-meta > span,
.tenant-support-page .tenant-task-card-meta > span,
.tenant-support-page .tenant-task-product-link {
  min-width: 0;
  border: 1px solid rgba(220, 227, 233, 0.78);
  border-radius: 7px;
  padding: 5px 6px;
  background: #fbfcfd;
}

.tenant-support-page .tenant-task-detail-grid strong,
.tenant-support-page .tenant-task-meta strong,
.tenant-support-page .tenant-task-card-meta strong {
  margin-bottom: 1px;
  color: #7b8794;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0;
}

.tenant-support-page .tenant-task-detail-grid em,
.tenant-support-page .tenant-task-product small,
.tenant-support-page .tenant-task-meta em,
.tenant-support-page .tenant-task-card-meta em {
  color: #27333f;
  font-size: 11px;
}

.tenant-support-page .tenant-task-card > small {
  display: block;
  overflow: hidden;
  color: #7b8794;
  font-size: 10px;
  font-weight: 680;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-card > button,
.tenant-support-page .tenant-task-card .tenant-task-actions button,
.tenant-support-page .tenant-task-card .tenant-task-actions select {
  width: 100%;
  min-height: 28px;
  margin-top: 8px;
  border-color: rgba(8, 122, 143, 0.22);
  border-radius: 7px;
  background: #f7fbfc;
  color: #0d6675;
  padding: 4px 8px;
  font-size: 11px;
  box-shadow: none;
}

.tenant-support-page .tenant-task-card .tenant-task-actions select {
  background: #ffffff;
  color: #24313d;
}

.tenant-support-page .tenant-task-card > button:hover,
.tenant-support-page .tenant-task-card .tenant-task-actions button:hover {
  background: #e8f8fb;
  transform: none;
}

.tenant-support-page .tenant-task-empty,
.tenant-support-page .tenant-support-task-section .tenant-section-empty {
  align-self: start;
  width: min(360px, 100%);
  min-height: 120px;
  border: 1px dashed rgba(203, 215, 224, 0.95);
  border-radius: 8px;
  background: #ffffff;
  color: #697586;
  padding: 18px;
}

.tenant-support-page .tenant-task-board-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(214, 223, 230, 0.9);
  border-radius: 8px;
  background: #ffffff;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board-header {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 11px 12px;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board-header .eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #697586;
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board-header h2 {
  margin: 0;
  overflow: hidden;
  color: #1f2933;
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board-header p {
  margin-top: 5px;
  overflow: hidden;
  color: #697586;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board-stats {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(237, 241, 245, 0.96);
  border-radius: 8px;
  background: #fbfcfd;
  overflow: hidden;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 36px;
  border-right: 1px solid rgba(237, 241, 245, 0.96);
  padding: 8px 10px;
  color: #52606d;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board-stats span:last-child {
  border-right: 0;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board-stats strong {
  color: #1f2933;
  font-size: 16px;
  line-height: 1;
}

.tenant-support-page .tenant-task-board-shell .tenant-task-board {
  display: grid;
  grid-auto-columns: minmax(248px, 292px);
  grid-auto-flow: column;
  gap: 10px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  background: #f6f8fa;
  scrollbar-width: thin;
}

.tenant-support-page .tenant-task-board-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(220, 227, 233, 0.9);
  border-radius: 8px;
  background: #eef3f5;
  overflow: hidden;
}

.tenant-support-page .tenant-task-board-column > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(220, 227, 233, 0.9);
  background: #ffffff;
}

.tenant-support-page .tenant-task-board-column > header strong {
  overflow: hidden;
  color: #24313d;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-support-page .tenant-task-board-column > header em {
  display: inline-grid;
  min-width: 22px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #edf2f7;
  color: #52606d;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.tenant-support-page .tenant-task-board-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.tenant-support-page .tenant-task-board-empty {
  min-height: 74px;
  border: 1px dashed rgba(203, 215, 224, 0.9);
  border-radius: 8px;
  background: #ffffff;
  color: #7b8794;
  padding: 12px;
  font-size: 11px;
  font-weight: 680;
}

@media (max-width: 860px) {
  .tenant-support-page .tenant-task-board-shell .tenant-task-board-header {
    grid-template-columns: 1fr;
  }

  .tenant-support-page .tenant-task-board-shell .tenant-task-board-stats {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .tenant-support-page .tenant-task-board-shell .tenant-task-board {
    grid-auto-columns: minmax(248px, 82vw);
    padding: 8px;
  }
}

@media (max-width: 560px) {
  .tenant-support-page .tenant-task-board-shell .tenant-task-board {
    grid-auto-columns: calc(100vw - 38px);
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .tenant-support-page:not(.hidden) .tenant-support-shell {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .tenant-support-page .tenant-task-board,
  .tenant-support-page .tenant-support-task-section {
    --task-column-width: 82vw;
  }

  .tenant-support-page .tenant-task-board-header,
  .tenant-support-page .tenant-task-board-toolbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tenant-support-page .tenant-task-board-controls,
  .tenant-support-page .tenant-task-controls {
    justify-content: flex-start;
  }

  .tenant-support-page .tenant-task-columns,
  .tenant-support-page .tenant-kanban-columns,
  .tenant-support-page .tenant-support-task-section {
    grid-auto-columns: minmax(248px, var(--task-column-width));
    padding: 8px;
  }

  .tenant-support-page:not(.hidden) .tenant-reply-input {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tenant-support-page .tenant-task-board,
  .tenant-support-page .tenant-support-task-section {
    --task-column-width: calc(100vw - 38px);
  }

  .tenant-support-page .tenant-task-stats,
  .tenant-support-page .tenant-task-board-stats {
    padding-inline: 8px;
  }

  .tenant-support-page .tenant-task-stat {
    min-width: 96px;
  }
}

.onboarding-page {
  min-height: 0;
  overflow: auto;
  background: #f3f6fa;
  padding: 20px;
}

.onboarding-hero,
.onboarding-card {
  border: 1px solid rgba(220, 227, 233, 0.92);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.onboarding-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.onboarding-hero h2 {
  margin-top: 4px;
}

.onboarding-hero p {
  max-width: 680px;
  margin-top: 6px;
  color: var(--muted);
}

.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.onboarding-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
}

.onboarding-card[data-state="ready"] {
  border-color: rgba(86, 168, 117, 0.42);
}

.onboarding-card[data-state="attention"] {
  border-color: rgba(233, 172, 59, 0.46);
}

.onboarding-card-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.onboarding-step {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 900;
}

.onboarding-card h3 {
  margin: 0;
  font-size: 18px;
}

.onboarding-card p,
.onboarding-facts dd,
.onboarding-empty {
  color: var(--muted);
}

.onboarding-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.onboarding-facts div {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #f8fbfc;
}

.onboarding-facts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.onboarding-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 760;
}

.onboarding-qr-slot .connect-card {
  margin: 0;
  box-shadow: none;
}

.onboarding-connect-card img {
  width: 230px;
}

.onboarding-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #f8fbfc;
  padding: 14px;
  font-weight: 720;
}

.onboarding-login-form {
  display: grid;
  gap: 9px;
}

.onboarding-login-form .remember-login {
  grid-column: auto;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(14px);
}

.auth-card {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.auth-card h2 {
  margin: 0;
  font-size: 1.5rem;
}

.auth-card p {
  margin: 0;
  color: var(--muted);
}

.auth-card label {
  display: grid;
  gap: 8px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.auth-message {
  min-height: 1.2em;
  font-size: 0.9rem;
}

.bulk-send-page {
  display: grid;
  gap: 16px;
}

.bulk-send-hero,
.bulk-review-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.bulk-send-hero h3 {
  margin: 4px 0;
  font-size: 1.15rem;
}

.bulk-send-hero p,
.bulk-review-topbar span {
  margin: 0;
  color: var(--muted);
}

.bulk-send-actions {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.bulk-send-actions label {
  display: grid;
  gap: 6px;
  min-width: 220px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
}

.bulk-send-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.bulk-send-head,
.bulk-send-row {
  display: grid;
  grid-template-columns: 40px minmax(260px, 1fr) 130px 130px 120px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.bulk-send-head {
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.bulk-send-row {
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.bulk-send-row.selected {
  background: #eff6ff;
}

.bulk-send-row strong {
  min-width: 0;
}

.bulk-send-row em.ready,
.bulk-review-strip .sent span,
.bulk-review-strip .approved span {
  color: #166534;
}

.bulk-send-row em.missing,
.bulk-review-strip .blocked span,
.bulk-review-strip .error span {
  color: #9a3412;
}

.bulk-send-removed {
  display: grid;
  gap: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px 14px;
}

.bulk-send-removed > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

.bulk-send-removed > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bulk-send-removed button {
  min-height: 32px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.82rem;
}

.bulk-review-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.bulk-review-strip button {
  display: grid;
  gap: 2px;
  min-width: 150px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
}

.bulk-review-strip button.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

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

.bulk-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 16px;
  align-items: start;
}

.bulk-review-preview,
.bulk-review-side section,
.bulk-review-actions {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.bulk-review-preview {
  display: flex;
  flex-direction: column;
  min-height: clamp(680px, calc(100dvh - 315px), 820px);
  padding: 14px;
}

.bulk-review-preview iframe {
  flex: 1;
  min-height: clamp(600px, calc(100dvh - 410px), 740px);
}

.bulk-review-side {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.bulk-review-side section {
  padding: 12px;
}

.bulk-review-panel {
  display: grid;
  gap: 12px;
}

.bulk-review-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 12px;
  margin: 0 0 14px;
}

.bulk-review-dl dt {
  color: var(--muted);
  font-weight: 800;
}

.bulk-review-dl dd {
  margin: 0;
}

.bulk-review-dl.compact {
  grid-template-columns: 78px 1fr;
  gap: 6px 10px;
  margin: 0;
  font-size: 0.9rem;
}

.bulk-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bulk-summary-grid > div,
.bulk-money-grid article,
.bulk-recipient-card,
.bulk-pack-grid article,
.bulk-inline-check {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.bulk-summary-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.bulk-summary-grid small,
.bulk-money-grid small,
.bulk-recipient-card small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bulk-summary-grid strong,
.bulk-summary-grid em,
.bulk-recipient-card strong,
.bulk-recipient-card em,
.bulk-pack-grid strong,
.bulk-pack-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-summary-grid em,
.bulk-recipient-card em,
.bulk-pack-grid small {
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
}

.bulk-money-grid {
  display: grid;
  gap: 8px;
}

.bulk-money-grid article {
  display: grid;
  grid-template-columns: minmax(58px, 0.8fr) repeat(4, minmax(64px, 1fr));
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  font-size: 0.9rem;
}

.bulk-money-grid article > span {
  display: grid;
  gap: 2px;
}

.bulk-compact-section {
  display: grid;
  gap: 8px;
}

.bulk-recipient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.bulk-recipient-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
}

.bulk-recipient-card input {
  margin-top: 2px;
}

.bulk-recipient-card > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.bulk-pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.bulk-pack-grid article {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
  padding: 7px 8px;
}

.bulk-pack-grid article small {
  grid-column: 2;
}

.bulk-inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #74410f;
  font-size: 0.85rem;
  font-weight: 800;
}

.bulk-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px;
  position: sticky;
  bottom: 12px;
  z-index: 2;
  box-shadow: 0 -8px 18px rgba(244, 246, 248, 0.84);
}

@media (max-width: 860px) {
  .onboarding-page {
    padding: 10px;
  }

  .onboarding-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

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

  .tenancy-pack-upload {
    grid-template-columns: 1fr;
  }

  .initial-payment-calculator {
    grid-template-columns: 1fr;
  }

  .tenancy-pack-card-head,
  .tenancy-pack-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-send-hero,
  .bulk-review-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-send-head,
  .bulk-send-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .bulk-send-head span:nth-child(n+3),
  .bulk-send-row > span,
  .bulk-send-row > em {
    display: none;
  }

  .bulk-review-layout {
    grid-template-columns: 1fr;
  }

  .bulk-review-dl,
  .bulk-space-table > div {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 860px) {
  body {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, #f8fbfc 0%, #eef4f6 100%);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    max-width: 100vw;
    overflow: hidden;
    border-bottom: 1px solid rgba(210, 220, 228, 0.82);
    background: rgba(248, 251, 252, 0.96);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px;
    backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
  }

  .brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .brand h1,
  .brand p {
    margin: 0;
  }

  .brand p {
    justify-self: end;
    font-size: 12px;
  }

  .assistant-bubble {
    right: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }

  .assistant-panel {
    right: 8px;
    bottom: calc(158px + env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    height: min(620px, calc(100dvh - 182px));
  }

  .assistant-panel.expanded {
    right: 8px;
    bottom: calc(102px + env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    height: min(760px, calc(100dvh - 122px));
  }

  #viewTabs,
  .view-tabs {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 90 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 7px !important;
    border: 1px solid rgba(203, 215, 224, 0.92);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(16px);
    overflow: hidden;
    scrollbar-width: none;
  }

  #viewTabs::-webkit-scrollbar,
  .view-tabs::-webkit-scrollbar {
    display: none;
  }

  .view-tabs button,
  .view-more {
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    border-radius: 13px !important;
    padding: 6px 5px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .view-tabs button.active {
    box-shadow: 0 8px 18px rgba(8, 122, 143, 0.16);
  }

  .view-tabs button[data-view="onboarding"],
  .view-tabs button[data-view="dashboard"],
  .view-tabs button[data-view="reviews"],
  .view-tabs button[data-view="properties"],
  .view-tabs button[data-view="property-memory"],
  .view-tabs button[data-view="emails"],
  .view-tabs button[data-view="tenant-support"],
  .view-tabs button[data-view="spareroom"] {
    display: none !important;
  }

  .view-more {
    position: relative !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(203, 215, 224, 0.95);
    background: #ffffff;
    color: #13202c;
    font-size: 13px;
    font-weight: 850;
  }

  .view-more.active {
    border-color: rgba(8, 122, 143, 0.34);
    background: #e8f8fb;
    color: #075f70;
  }

  .view-more select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0.01;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: 0;
  }

  .dashboard-page:not(.hidden),
  .spareroom-page:not(.hidden),
  .tenant-support-page:not(.hidden),
  .tenancy-page:not(.hidden),
  .properties-page:not(.hidden),
  .settings-page:not(.hidden) {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 8px;
  }

  .emails-page:not(.hidden) {
    height: calc(100dvh - var(--app-header-height, 92px));
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .emails-page:not(.hidden) .emails-shell,
  .emails-page:not(.hidden) .emails-sidebar {
    min-height: 0;
    height: 100%;
  }

  .emails-page:not(.hidden) .emails-list {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .chat-row,
  .email-row,
  .spareroom-lead-row {
    min-width: 0;
    overflow: hidden;
  }

  .chat-row {
    grid-template-columns: 32px 42px minmax(0, 1fr);
  }

  .chat-row .chat-item,
  .spareroom-lead-row span {
    min-width: 0;
  }

  .chat-title span:first-child,
  .snippet,
  .spareroom-lead-row strong,
  .spareroom-lead-row small,
  .spareroom-lead-row p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-avatar,
  .spareroom-avatar {
    flex: 0 0 auto;
    overflow: hidden;
  }

  .avatar-open img,
  .spareroom-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tenancy-page:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    background: #f6f8fa;
  }

  .tenancy-page:not(.hidden) .tenancy-nav {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    max-height: none;
    overflow: visible;
    border: 1px solid rgba(220, 227, 233, 0.92);
    border-radius: 10px;
    padding: 12px 12px 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  }

  .tenancy-page:not(.hidden) .tenancy-nav-head {
    padding: 0 2px 8px;
  }

  .tenancy-page:not(.hidden) .tenancy-nav-head h2 {
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.18;
  }

  .tenancy-page:not(.hidden) .tenancy-nav-head p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.35;
  }

  .tenancy-page:not(.hidden) .tenancy-subnav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
    overflow: visible;
    padding: 2px 0 4px;
    scrollbar-width: none;
  }

  .tenancy-page:not(.hidden) .tenancy-subnav::-webkit-scrollbar {
    display: none;
  }

  .tenancy-page:not(.hidden) .tenancy-subnav button,
  .tenancy-page:not(.hidden) .tenancy-subnav-more {
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 6px 8px;
    white-space: normal;
    border-radius: 12px;
  }

  .tenancy-page:not(.hidden) .tenancy-subnav button.active {
    box-shadow: 0 8px 18px rgba(8, 122, 143, 0.14);
  }

  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="properties"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="landlords"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="agents"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="templates"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="merge-fields"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="bulk-send"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="signatures"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="deposits"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="gocardless-dd"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="gocardless-payouts"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="bills"],
  .tenancy-page:not(.hidden) .tenancy-subnav button[data-tenancy-section="payments"] {
    display: none;
  }

  .tenancy-page:not(.hidden) .tenancy-subnav-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(203, 215, 224, 0.95);
    border-radius: 999px;
    background: #ffffff;
    color: #13202c;
    font-size: 13px;
    font-weight: 850;
  }

  .tenancy-page:not(.hidden) .tenancy-subnav-more.active {
    border-color: rgba(8, 122, 143, 0.34);
    background: #e8f8fb;
    color: #075f70;
  }

  .tenancy-page:not(.hidden) .tenancy-subnav-more select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0.01;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: 0;
  }

  .tenancy-page:not(.hidden) .tenancy-workbench {
    min-height: 0;
    overflow: visible;
    border: 1px solid rgba(220, 227, 233, 0.92);
    border-radius: 10px;
    background: #ffffff;
  }

  .tenancy-page:not(.hidden) .tenancy-toolbar {
    position: sticky;
    top: 0;
    z-index: 8;
    gap: 10px;
    padding: 14px;
    border-radius: 10px 10px 0 0;
  }

  .tenancy-page:not(.hidden) .tenancy-toolbar h2 {
    font-size: 21px;
    line-height: 1.16;
  }

  .tenancy-page:not(.hidden) .tenancy-toolbar-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .tenancy-page:not(.hidden) .tenancy-dashboard,
  .tenancy-page:not(.hidden) #tenancyOverview {
    padding: 14px;
  }

  .bulk-send-page {
    gap: 12px;
  }

  .bulk-send-hero,
  .bulk-review-topbar {
    gap: 12px;
    padding: 14px;
  }

  .bulk-send-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
  }

  .bulk-send-actions label {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .bulk-send-actions button {
    width: 100%;
    min-width: 0;
  }

  .bulk-send-table {
    overflow: hidden;
  }

  .bulk-send-head,
  .bulk-send-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    padding: 11px 12px;
  }

  .bulk-send-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bulk-review-strip {
    gap: 8px;
    padding-bottom: 4px;
  }

  .bulk-review-strip button {
    flex: 0 0 min(156px, 48vw);
    min-width: 0;
    min-height: 58px;
  }

  .bulk-review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .bulk-review-preview {
    min-height: 0;
    padding: 10px;
  }

  .bulk-review-preview iframe {
    width: 100%;
    min-height: min(72dvh, 560px);
  }

  .bulk-review-side {
    gap: 10px;
  }

  .bulk-summary-grid,
  .bulk-recipient-grid,
  .bulk-pack-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulk-money-grid article {
    grid-template-columns: minmax(0, 1fr) minmax(58px, auto);
  }

  .bulk-money-grid article > span:nth-child(n+4) {
    display: none;
  }

  .bulk-review-actions {
    position: sticky;
    bottom: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
  }

  .tenant-support-page:not(.hidden) {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 8px;
  }

  .tenant-support-page:not(.hidden) .tenant-support-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .tenant-support-page:not(.hidden) .tenant-support-sidebar,
  .tenant-support-page:not(.hidden) .tenant-support-detail,
  .tenant-support-page:not(.hidden) .tenant-property-workspace {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .tenant-support-page:not(.hidden) .tenant-support-sidebar {
    max-height: none;
  }

  .tenant-support-page:not(.hidden) .tenant-group-list,
  .tenant-support-page:not(.hidden) .tenant-property-list,
  .tenant-support-page:not(.hidden) #propertyGroupList.tenant-group-list {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card,
  .tenant-support-page:not(.hidden) .tenant-property-nav-item {
    max-height: none;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .tenant-support-page:not(.hidden) .tenant-detail-card {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .tenant-support-page:not(.hidden) .tenant-message-panel {
    min-height: 0;
    overflow: visible;
  }

  .tenant-support-page:not(.hidden) .tenant-message-list {
    width: 100%;
    max-height: min(52dvh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tenant-support-page:not(.hidden) .tenant-message {
    max-width: 92%;
  }

  .tenant-support-page:not(.hidden) .tenant-reply-input {
    grid-template-columns: minmax(0, 1fr);
  }

  .tenant-support-page:not(.hidden) .tenant-reply-actions {
    width: 100%;
  }

  .spareroom-page:not(.hidden) {
    display: grid;
    align-content: start;
    gap: 10px;
    padding-inline: 8px;
  }

  .spareroom-module-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .spareroom-header-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }

  .spareroom-login-fields,
  .spareroom-quick-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .spareroom-action-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .spareroom-action-strip > button,
  .spareroom-action-strip .import-control {
    width: 100%;
  }

  .spareroom-auto-import select {
    width: 74px;
  }

  .spareroom-filters {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 6px;
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .spareroom-filters .toolbar-search {
    grid-column: 1;
    justify-self: stretch;
    width: 42px;
    min-width: 42px;
  }

  .spareroom-filters .toolbar-search.is-open,
  .spareroom-filters .toolbar-search:focus-within {
    position: absolute;
    left: 8px;
    right: 8px;
    width: auto;
  }

  .spareroom-filters .status-filter-control {
    grid-column: 2;
    min-width: 0;
  }

  .spareroom-topup-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-inline: 8px;
  }

  .spareroom-inbox {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .spareroom-sidebar {
    min-height: 0;
  }

  .spareroom-lead-list {
    overflow: visible;
  }

  .spareroom-lead-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 76px;
    padding: 10px 12px;
  }
}

@media (max-width: 520px) {
  .bulk-send-actions,
  .bulk-review-actions,
  .spareroom-action-strip,
  .spareroom-topup-notice {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulk-review-strip button {
    flex-basis: min(148px, 58vw);
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools {
    grid-template-columns: minmax(0, 1fr) 1fr 1fr;
  }
}

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .module-tabs {
    max-width: 100vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .module-tabs::-webkit-scrollbar {
    display: none;
  }

  .module-tabs button {
    flex: 0 0 auto;
  }

  .tenant-support-section-bar {
    position: sticky;
    top: calc(45px + env(safe-area-inset-top));
    z-index: 65;
    max-width: 100vw;
    overflow: hidden;
    padding: 6px 7px;
    background: rgba(248, 251, 252, 0.96);
    border-bottom: 1px solid rgba(210, 220, 228, 0.82);
    backdrop-filter: blur(14px);
  }

  .tenant-support-section-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 5px;
    overflow: visible;
    scrollbar-width: none;
  }

  .tenant-support-section-tabs::-webkit-scrollbar {
    display: none;
  }

  .tenant-support-section-tabs button,
  .tenant-section-more-wrap,
  .tenant-section-more {
    position: relative;
    justify-content: center;
    min-width: 0;
    width: 100%;
    padding-inline: 5px;
  }

  .tenant-section-more-wrap {
    display: block;
    padding-inline: 0;
  }

  .tenant-support-section-tabs .tenant-section-collapsible {
    display: none;
  }

  .tenant-support-section-tabs button span,
  .tenant-section-more span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tenant-support-section-tabs button span[data-mobile-label] {
    font-size: 0;
  }

  .tenant-support-section-tabs button span[data-mobile-label]::after {
    content: attr(data-mobile-label);
    font-size: 12px;
    line-height: 1.1;
  }

  .tenant-support-section-tabs button em {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .tenant-support-page:not(.hidden) {
    width: 100%;
    max-width: 100vw;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 6px !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open {
    padding: 2px 6px 6px !important;
    min-height: 0 !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-support-shell {
    gap: 0 !important;
  }

  .tenant-support-page:not(.hidden) *,
  .tenant-support-page:not(.hidden) *::before,
  .tenant-support-page:not(.hidden) *::after {
    min-width: 0;
    box-sizing: border-box;
  }

  .tenant-support-page:not(.hidden) .tenant-support-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .tenant-support-page:not(.hidden) .tenant-support-sidebar,
  .tenant-support-page:not(.hidden) .tenant-support-detail,
  .tenant-support-page:not(.hidden) .tenant-property-workspace,
  .tenant-support-page:not(.hidden) .tenant-detail-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden) .tenant-support-sidebar {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    max-height: none;
  }

  .tenant-support-page:not(.hidden) .tenant-support-intro {
    padding: 12px 14px;
  }

  .tenant-support-page:not(.hidden) .tenant-support-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .tenant-support-page:not(.hidden) .tenant-group-list,
  .tenant-support-page:not(.hidden) .tenant-property-list,
  .tenant-support-page:not(.hidden) #propertyGroupList.tenant-group-list {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 6px !important;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card,
  .tenant-support-page:not(.hidden) .tenant-property-nav-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px !important;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-main,
  .tenant-support-page:not(.hidden) .tenant-group-card-main p,
  .tenant-support-page:not(.hidden) .tenant-group-card-main small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools {
    grid-template-columns: minmax(0, 1fr) 1fr 1fr !important;
    width: 100%;
  }

  .tenant-support-page:not(.hidden) .tenant-detail-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .tenant-support-page:not(.hidden) .tenant-detail-header .property-group-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .tenant-support-page:not(.hidden) .tenant-detail-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden) .tenant-detail-meta span {
    display: grid;
    gap: 2px;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: 8px;
    background: #ffffff;
    overflow-wrap: anywhere;
  }

  .tenant-support-page:not(.hidden) .tenant-link-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden) .tenant-link-form.hidden {
    display: none !important;
  }

  .tenant-support-page:not(.hidden) .tenant-link-form input,
  .tenant-support-page:not(.hidden) .tenant-link-form select,
  .tenant-support-page:not(.hidden) .tenant-link-form button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .tenant-support-page:not(.hidden) .tenant-message-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden) .tenant-message-list {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .tenant-support-page:not(.hidden) .tenant-message {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .tenant-support-page:not(.hidden) .tenant-media-link,
  .tenant-support-page:not(.hidden) .tenant-message img,
  .tenant-support-page:not(.hidden) .tenant-message video {
    max-width: 100% !important;
    height: auto !important;
  }

  .tenant-support-page:not(.hidden) .tenant-reply-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden) .tenant-reply-input {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .tenant-support-page:not(.hidden) .tenant-reply-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .tenant-support-page:not(.hidden) .tenant-reply-actions button {
    width: 100%;
  }

  .tenant-support-page:not(.hidden) .tenant-reply-actions button.primary {
    grid-column: 1 / -1;
  }

  .tenant-support-page:not(.hidden):not(.mobile-detail-open) .tenant-support-detail {
    display: none !important;
  }

  .tenant-support-page:not(.hidden):not(.mobile-detail-open) {
    min-height: 0 !important;
    overflow-y: visible !important;
  }

  .tenant-support-page:not(.hidden):not(.mobile-detail-open) .tenant-support-shell,
  .tenant-support-page:not(.hidden):not(.mobile-detail-open) .tenant-support-sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .tenant-support-page:not(.hidden):not(.mobile-detail-open) .tenant-group-list,
  .tenant-support-page:not(.hidden):not(.mobile-detail-open) #propertyGroupList.tenant-group-list {
    max-height: none !important;
    overflow: visible !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-support-sidebar {
    display: none !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-support-detail {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.tenant-mobile-detail-active {
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  body.tenant-mobile-detail-active .assistant-bubble,
  body.tenant-composer-keyboard-open .assistant-bubble {
    display: none !important;
  }

  body.tenant-mobile-detail-active .topbar,
  body.tenant-mobile-detail-active #tenantSupportSectionBar {
    display: none !important;
  }

  body.tenant-mobile-detail-active .tenant-support-page:not(.hidden).mobile-detail-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: env(safe-area-inset-top) 6px 6px !important;
    overflow: hidden !important;
    background: #f3f8fa;
  }

  body.tenant-mobile-detail-active .tenant-support-page:not(.hidden).mobile-detail-open .tenant-support-shell,
  body.tenant-mobile-detail-active .tenant-support-page:not(.hidden).mobile-detail-open .tenant-support-detail,
  body.tenant-mobile-detail-active .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-card {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-card {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    height: 100% !important;
    min-height: 520px !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center;
    gap: 8px !important;
    padding: 10px !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-header > div:first-of-type {
    overflow: hidden;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-header .composer-kicker,
  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-header p,
  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-meta,
  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-group-switcher,
  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-workspace-tabs {
    display: none !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-header h2 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    line-height: 1.2;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-header .property-group-actions {
    display: none !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-link-form.hidden {
    display: none !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-link-form:not(.hidden) {
    max-height: 190px;
    overflow-y: auto !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-message-panel {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-message-list {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 8px;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-form {
    border-top: 1px solid #dce6ee;
    background: #ffffff;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 7px;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-ai-context-field {
    width: 100%;
    margin: 0;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-ai-context-field input {
    min-height: 36px;
    font-size: 13px;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-input textarea {
    min-height: 54px;
    max-height: 108px;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-attachment-field {
    display: none !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-actions {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    margin: 0 !important;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-actions::-webkit-scrollbar {
    display: none;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-actions button {
    flex: 0 0 auto;
    width: auto !important;
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-actions button.primary {
    order: -1;
    grid-column: auto;
    flex-basis: 112px;
  }

  body.tenant-composer-keyboard-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 110;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    height: var(--tenant-visual-height, 100dvh) !important;
    min-height: 0 !important;
    padding: env(safe-area-inset-top) 6px 6px !important;
    overflow: hidden !important;
    background: #f3f8fa;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-support-shell,
  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-support-detail,
  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-detail-card {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-detail-card {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-detail-header {
    padding: 8px !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-detail-header .property-group-actions {
    display: none !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-message-panel {
    padding: 6px 6px calc(var(--tenant-composer-height, 156px) + 10px) !important;
    overflow: hidden !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-message-list {
    height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-reply-form {
    position: fixed !important;
    left: 6px;
    right: 6px;
    bottom: max(env(safe-area-inset-bottom), var(--tenant-keyboard-bottom, 0px));
    z-index: 120;
    max-height: min(36vh, 230px);
    border: 1px solid #cbdfe8;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.14);
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-reply-input textarea {
    min-height: 72px;
    max-height: 132px;
    font-size: 16px;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-reply-actions {
    overflow-x: auto;
  }

  .tenant-mobile-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: fit-content;
    padding: 0 14px;
    border: 1px solid #cbd8e3;
    border-radius: 999px;
    background: #ffffff;
    color: #13202c;
    font-weight: 850;
  }
}

@media (max-width: 520px) {
  .tenant-support-page:not(.hidden) .tenant-detail-meta,
  .tenant-support-page:not(.hidden) .tenant-detail-header .property-group-actions,
  .tenant-support-page:not(.hidden) .tenant-group-card-tools,
  .tenant-support-page:not(.hidden) .tenant-reply-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 860px) {
  body.mobile-sheet-open {
    overflow: hidden !important;
  }

  .mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: rgba(15, 23, 42, 0.32);
  }

  .mobile-sheet-backdrop.hidden,
  .mobile-action-sheet.hidden {
    display: none !important;
  }

  .mobile-action-sheet {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 181;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: min(64dvh, 520px);
    overflow: hidden;
    border: 1px solid rgba(203, 215, 224, 0.9);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  }

  .mobile-action-sheet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 8px;
  }

  .mobile-action-sheet h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
  }

  .mobile-action-sheet header button {
    min-height: 34px;
    border-radius: 999px;
    padding: 0 12px;
  }

  .mobile-action-sheet-options {
    display: grid;
    gap: 8px;
    overflow-y: auto;
    padding: 8px 12px 14px;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-action-sheet-options button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    border-radius: 14px;
    padding: 10px 12px;
    text-align: left;
  }

  .mobile-action-sheet-options button.active {
    border-color: rgba(8, 122, 143, 0.38);
    background: #e8f8fb;
    color: #075f70;
  }

  .mobile-action-sheet-options em {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #e8eef3;
    color: #52616f;
    font-style: normal;
    font-size: 12px;
    font-weight: 850;
  }

  #viewTabs .view-more:not(.mobile-more-trigger) {
    display: none !important;
  }

  #mobileViewMoreButton.mobile-more-trigger {
    position: relative !important;
    display: inline-flex !important;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "main"
      "tools" !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-main {
    grid-area: main;
    display: grid !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-main strong {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.18;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-main p {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    color: #556575;
    font-size: 12px;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-main small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools {
    grid-area: tools;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: end;
    gap: 8px !important;
    width: 100% !important;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools label {
    min-width: 0;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools .property-group-actions {
    display: contents;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools button {
    min-width: 68px;
    min-height: 42px;
    border-radius: 12px;
    padding: 0 10px;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools select,
  .tenant-support-page:not(.hidden) .tenant-group-card-tools input {
    min-height: 42px;
    border-radius: 12px;
    font-size: 12px;
  }

  body.tenant-mobile-detail-active .tenant-support-page:not(.hidden).mobile-detail-open {
    padding: env(safe-area-inset-top) 0 0 !important;
  }

  body.tenant-mobile-detail-active .tenant-support-page:not(.hidden).mobile-detail-open .tenant-detail-card {
    border-radius: 0 !important;
    border-inline: 0 !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-form {
    overflow: visible !important;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 2px 2px !important;
    scrollbar-width: none;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-actions button {
    flex: 0 0 auto !important;
    min-height: 38px;
    border-radius: 12px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-actions button.primary {
    order: -2;
    min-width: 132px;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open .tenant-reply-actions [data-tenant-knowledge-toggle] {
    order: -1;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open {
    height: var(--tenant-visual-height, 100dvh) !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-message-panel {
    padding: 6px !important;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-message-list {
    scroll-padding-bottom: calc(var(--tenant-composer-height, 156px) + 10px);
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-reply-form {
    left: 0;
    right: 0;
    bottom: 0 !important;
    max-height: min(34vh, 220px);
    border-radius: 14px 14px 0 0;
  }

  .tenant-support-page:not(.hidden).mobile-detail-open.keyboard-open .tenant-reply-input textarea {
    min-height: 60px;
    max-height: 118px;
  }

  .assistant-bubble {
    bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 390px) {
  .tenant-support-page:not(.hidden) .tenant-group-card-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools label {
    grid-column: 1 / -1;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools button {
    min-width: 0;
    padding-inline: 8px;
  }
}

@media (max-width: 520px) {
  .tenant-support-page:not(.hidden) .tenant-group-card-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools label {
    grid-column: 1 / -1;
  }

  .tenant-support-page:not(.hidden) .tenant-group-card-tools button {
    width: 100%;
  }
}

@media (max-width: 860px) {
  body:has(.tenant-support-page:not(.hidden):not(.mobile-detail-open)) .assistant-bubble {
    display: none !important;
  }

  body:has(.review-page.detail-open:not(.hidden)) .assistant-bubble {
    display: none !important;
  }

  .tenant-section-more {
    min-height: 38px;
  }
}

body:has(.emails-page:not(.hidden)) {
  overflow: hidden !important;
}

.emails-page:not(.hidden) {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.emails-page:not(.hidden) .emails-shell,
.emails-page:not(.hidden) .emails-sidebar {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.emails-page:not(.hidden) .emails-list {
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.emails-page:not(.hidden) .emails-detail {
  display: grid !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.emails-page:not(.hidden) .email-thread {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100% !important;
  min-height: 0 !important;
}

.emails-page:not(.hidden) .email-thread > * + * {
  margin-top: 10px;
}

.emails-page:not(.hidden) .email-body {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.emails-page:not(.hidden) .email-body-frame,
.emails-page:not(.hidden) .email-body-content {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}

body:has(.property-memory-page:not(.hidden)) {
  overflow: hidden !important;
}

.property-memory-page:not(.hidden) {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.memory-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: #f6f8fb;
}

.memory-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  border-right: 1px solid #d9e2ec;
  background: #ffffff;
  overflow: hidden;
}

.memory-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid #edf1f5;
}

.memory-toolbar h2 {
  margin: 2px 0 4px;
  font-size: 20px;
}

.memory-toolbar p {
  margin: 0;
  color: #687386;
  font-size: 13px;
  line-height: 1.4;
}

.memory-controls {
  padding: 12px 18px;
  border-bottom: 1px solid #edf1f5;
}

.memory-controls input {
  width: 100%;
}

.memory-property-list {
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.memory-property-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #17202a;
  text-align: left;
}

.memory-property-row:hover,
.memory-property-row.selected {
  background: #eef6ff;
  border-color: #c8ddf2;
}

.memory-code {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  height: 32px;
  border-radius: 6px;
  background: #182235;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.memory-property-main {
  min-width: 0;
}

.memory-property-main strong,
.memory-property-main small,
.memory-property-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-property-main small,
.memory-property-row em {
  color: #687386;
  font-size: 12px;
  font-style: normal;
}

.memory-detail {
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.memory-detail.empty {
  display: grid;
  place-items: center;
}

.memory-profile {
  display: grid;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.memory-profile-header,
.memory-panel {
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 16px;
}

.memory-profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.memory-profile-header h2 {
  margin: 2px 0 6px;
  font-size: 24px;
}

.memory-profile-header p {
  margin: 0;
  color: #687386;
}

.memory-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 8px;
  min-width: min(420px, 100%);
}

.memory-stat-strip span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid #e5ebf2;
  border-radius: 8px;
  background: #f8fafc;
  color: #687386;
  font-size: 12px;
}

.memory-stat-strip strong {
  color: #17202a;
  font-size: 18px;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.memory-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fbfcfe;
}

.memory-card + .memory-card,
.memory-event + .memory-event,
.memory-note-form + .memory-card {
  margin-top: 10px;
}

.memory-card.pinned {
  border-color: #bfd7ee;
  background: #f3f8fd;
}

.memory-card strong,
.memory-event strong {
  display: block;
  margin-top: 4px;
  color: #17202a;
}

.memory-card p,
.memory-event p {
  margin: 0;
  color: #435267;
  line-height: 1.45;
  white-space: pre-wrap;
}

.memory-card small,
.memory-event small {
  color: #687386;
}

.memory-card code {
  display: block;
  overflow-wrap: anywhere;
  padding: 8px;
  border-radius: 6px;
  background: #eef2f6;
  color: #2b3a4d;
  font-size: 12px;
}

.memory-chip {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e9f2fb;
  color: #285176;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.memory-note-form {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.memory-note-form textarea {
  resize: vertical;
}

.memory-timeline {
  display: grid;
  gap: 10px;
}

.memory-event {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  background: #fbfcfe;
}

.memory-event time {
  color: #687386;
  font-size: 12px;
}

.memory-doc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vacant-spaces-panel {
  margin-top: 16px;
}

.available-spaces-list {
  display: grid;
  gap: 12px;
}

.available-space-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.available-space-summary article,
.available-space-card {
  border: 1px solid #dce6ef;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.available-space-summary span,
.available-space-card small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.available-space-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
}

.available-space-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.available-space-card {
  display: grid;
  gap: 7px;
}

.available-space-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.available-space-card p {
  margin: 0;
  color: #1f2937;
}

.status-pill.vacant {
  background: #e7f8ef;
  color: #0d6b3c;
}

.status-pill.let_agreed {
  background: #fff4dc;
  color: #8a5a00;
}

.status-pill.rented {
  background: #edf2f7;
  color: #475569;
}

@media (max-width: 900px) {
  .memory-shell,
  .memory-grid,
  .memory-doc-grid {
    grid-template-columns: 1fr;
  }

  .available-space-summary {
    grid-template-columns: 1fr;
  }

  .memory-shell {
    overflow: auto;
  }

  .memory-sidebar,
  .memory-detail {
    overflow: visible;
  }

  .memory-profile-header {
    display: grid;
  }

  .memory-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .memory-event {
    grid-template-columns: 1fr;
  }
}