:root { --bg:#f7f8fb; --card:#fff; --line:#e7e9ef; --text:#18202f; --muted:#758094; --teal:#12b3a8; --soft:#eef9f8; --danger:#e05252; --amber:#c98610; }
* { box-sizing:border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); }
.app { display:flex; min-height:100vh; }
.sidebar { width:230px; padding:22px; border-right:1px solid var(--line); background:#ffffffcc; backdrop-filter:blur(10px); }
.brand { font-weight:800; font-size:20px; margin-bottom:28px; }
.nav { width:100%; border:0; background:transparent; text-align:left; padding:12px 14px; border-radius:16px; color:var(--muted); font-weight:650; margin-bottom:6px; cursor:pointer; }
.nav.active, .nav:hover { background:var(--soft); color:#08756f; }
.sync { margin-top:24px; padding:12px; border-radius:16px; background:#f3f5f8; font-size:13px; color:var(--muted); line-height:1.4; }
.layout { flex:1; display:grid; grid-template-columns: 360px minmax(420px, 1fr) 340px; gap:16px; padding:18px; }
.listPane,.chatPane,.profilePane { background:var(--card); border:1px solid var(--line); border-radius:24px; overflow:hidden; min-height:calc(100vh - 36px); }
.paneHeader { display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:22px; letter-spacing:-0.03em; }
button { border:0; border-radius:14px; padding:10px 14px; background:#111827; color:white; font-weight:700; cursor:pointer; }
button.secondary { background:#edf1f7; color:#223; }
.summary { padding:14px 18px; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; }
.chatCard { margin:12px; padding:14px; border:1px solid var(--line); border-radius:20px; cursor:pointer; position:relative; transition:0.15s ease; background:white; }
.chatCard:hover { transform:translateY(-1px); box-shadow:0 8px 24px #18202f10; }
.chatCard.active { border-color:var(--teal); background:var(--soft); }
.chatTitle { font-weight:800; display:flex; justify-content:space-between; gap:10px; }
.badge { font-size:12px; border-radius:999px; padding:4px 8px; background:#edf1f7; color:#596273; }
.badge.blocked { background:#fff0f0; color:var(--danger); }
.avatarWatermark { position:absolute; right:14px; bottom:10px; opacity:.12; font-size:46px; pointer-events:none; }
.meta { color:var(--muted); font-size:13px; margin-top:8px; }
.empty { padding:24px; color:var(--muted); }
.chatHeader { padding:18px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.messages { height:calc(100vh - 210px); overflow:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:76%; padding:12px 14px; border-radius:18px; line-height:1.35; font-size:15px; }
.msg.inbound { background:#f1f4f8; align-self:flex-start; }
.msg.outbound { background:#daf7f4; align-self:flex-end; }
.msgMeta { display:block; font-size:11px; color:var(--muted); margin-top:6px; }
.replyBox { border-top:1px solid var(--line); padding:14px; display:flex; gap:10px; }
.replyBox textarea { flex:1; resize:none; min-height:52px; border:1px solid var(--line); border-radius:16px; padding:12px; font:inherit; }
.hidden { display:none; }
.profileBlock { padding:18px; border-bottom:1px solid var(--line); }
.profileBlock h2 { margin:0 0 10px; font-size:18px; }
.field { font-size:14px; color:var(--muted); margin:6px 0; }
.note { border:1px solid var(--line); border-radius:16px; padding:10px; margin-top:8px; background:#fbfcfe; font-size:13px; }
.inputRow { display:flex; gap:8px; margin-top:10px; }
.inputRow input,.inputRow select { flex:1; border:1px solid var(--line); border-radius:12px; padding:10px; }
.smallActions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.smallActions button { padding:8px 10px; font-size:12px; }
@media (max-width:1100px){ .layout{ grid-template-columns:320px 1fr; }.profilePane{ display:none; }.sidebar{ width:190px; }}
.navActive { background:var(--soft); color:#08756f; }
.staffLabel { display:block; margin:20px 0 6px; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.staffPicker { width:100%; border:1px solid var(--line); border-radius:14px; padding:10px; background:white; color:var(--text); }
.pageView { flex:1; padding:18px; }
.pageHeader { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:20px; display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:16px; }
.pageHeader p { margin:6px 0 0; color:var(--muted); }
.pageCard { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:18px; min-height:220px; overflow:auto; }
.splitPage { display:grid; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.25fr); gap:16px; }
.summaryGrid { display:grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap:14px; margin-bottom:18px; }
.summaryCard { border:1px solid var(--line); border-radius:20px; padding:18px; background:white; display:flex; flex-direction:column; gap:8px; }
.summaryCard b { font-size:28px; letter-spacing:-.04em; }
.summaryCard span { color:var(--muted); font-size:13px; }
.tableList { display:flex; flex-direction:column; gap:10px; }
.tableRow { border:1px solid var(--line); border-radius:18px; background:white; padding:14px; display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; }
.tableRow:hover { box-shadow:0 8px 24px #18202f0d; transform:translateY(-1px); }
.auditRow { cursor:default; }
.rowActions { display:flex; gap:8px; flex-shrink:0; }
.linkButton { background:transparent; color:#08756f; padding:4px 0; font-weight:700; }
.warningBox { border:1px solid #ffd1d1; background:#fff7f7; color:#9b1c1c; border-radius:16px; padding:12px; margin:10px 0; }
.smallEmpty { padding:12px; }
.clientDetailBlock { border:0; padding:0; }
@media (max-width:1100px){ .splitPage{ grid-template-columns:1fr; }.summaryGrid{ grid-template-columns:repeat(2, minmax(150px,1fr)); }}

/* v6 operational smoothness layer */
.queueTabs { display:flex; gap:6px; flex-wrap:wrap; padding:12px 14px 4px; border-bottom:1px solid var(--line); }
.queueTab { background:#f1f4f8; color:#5b6475; padding:7px 10px; border-radius:999px; font-size:12px; }
.queueTab.selected { background:#111827; color:white; }
.draftPill { display:inline-block; margin-top:8px; padding:4px 8px; border-radius:999px; background:#fff7df; color:#8a5a00; font-size:12px; font-weight:700; }
.staffMini { display:flex; align-items:center; gap:9px; margin-top:14px; padding:10px; border:1px solid var(--line); border-radius:16px; background:#fbfcfe; }
.staffAvatar { width:38px; height:38px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#eef9f8,#f7f0ff); font-size:18px; }
.avatarBadge { display:inline-grid; place-items:center; min-width:26px; height:26px; border-radius:999px; background:linear-gradient(135deg,#eef9f8,#f7f0ff); border:1px solid #ffffffcc; box-shadow:0 4px 14px #18202f12; font-size:13px; }
.compact { margin-top:8px; font-size:12px; padding:8px; }

/* v10 Queue Control Center */
#inbox { max-height: calc(100vh - 190px); overflow:auto; scroll-behavior:smooth; }
.queueTab { display:flex; align-items:center; gap:6px; }
.queueTab span { min-width:20px; padding:2px 6px; border-radius:999px; background:#ffffffaa; color:inherit; font-size:11px; }
.queueTab.selected span { background:#ffffff22; color:white; }
.queueSignals { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; font-size:12px; color:#5f697a; }
.queueSignals span { padding:4px 8px; border-radius:999px; background:#f4f6fa; }
.riskPill { background:#fff0f0 !important; color:#b42318 !important; font-weight:800; }
.payPill { background:#fff7df !important; color:#8a5a00 !important; font-weight:800; }
.newItemsBanner { position:sticky; top:8px; z-index:3; margin:10px 12px; width:calc(100% - 24px); background:#0f766e; box-shadow:0 8px 24px #0f766e33; }


/* v13 stabilization/recovery polish */
.timelineItem { border-left:3px solid var(--teal); padding:8px 10px; margin:8px 0; background:#fbfcfe; border-radius:12px; }
.pageCard h2 { letter-spacing:-.02em; }

/* v15.4 controlled exterior polish: beauty without drift */
:root {
  --bg: #f8f3ec;
  --card: rgba(255, 255, 255, 0.74);
  --line: rgba(139, 113, 151, 0.18);
  --text: #26223a;
  --muted: #80768c;
  --teal: #7a9f9b;
  --soft: rgba(232, 224, 244, 0.58);
  --danger: #c95c63;
  --amber: #c68a35;
  --lilac: #cbb8e6;
  --cream: #fff7ea;
  --rose: #f2b8ad;
  --water: #b8d6d7;
  --leaf: #a9c9a7;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 225, 185, 0.72), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(198, 180, 229, 0.55), transparent 34%),
    radial-gradient(circle at 78% 86%, rgba(171, 211, 207, 0.46), transparent 32%),
    linear-gradient(135deg, #fbf5eb 0%, #f5eff9 48%, #edf7f6 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(145, 119, 171, 0.12) 19% 20%, transparent 21% 43%, rgba(91, 151, 142, 0.10) 44% 45%, transparent 46%),
    repeating-linear-gradient(98deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 9px);
  mix-blend-mode: multiply;
}

.sidebar,
.listPane,
.chatPane,
.profilePane,
.pageHeader,
.pageCard,
.summaryCard,
.chatCard,
.tableRow,
.note,
.sync,
.staffMini {
  background: rgba(255,255,255,0.68);
  border-color: rgba(139, 113, 151, 0.18);
  box-shadow: 0 18px 50px rgba(85, 70, 103, 0.08), inset 0 1px 0 rgba(255,255,255,0.78);
  backdrop-filter: blur(18px) saturate(1.08);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(249,240,250,0.58)),
    radial-gradient(circle at 20% 18%, rgba(255, 202, 132, 0.26), transparent 28%);
}

.brand {
  color: #4d4168;
  letter-spacing: -0.04em;
}

.nav {
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.nav.active,
.nav.navActive,
.nav:hover {
  background: linear-gradient(135deg, rgba(220, 207, 242, 0.72), rgba(214, 237, 233, 0.54));
  color: #4e3d70;
  box-shadow: 0 10px 24px rgba(100, 76, 130, 0.12);
  transform: translateY(-1px);
}

button {
  background: linear-gradient(135deg, #6c5b8d, #719f9a);
  box-shadow: 0 10px 24px rgba(94, 79, 126, 0.18);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 32px rgba(94, 79, 126, 0.24);
}

button.secondary,
.queueTab {
  background: rgba(255,255,255,0.66);
  color: #5f5571;
  border: 1px solid rgba(139, 113, 151, 0.16);
  box-shadow: none;
}

.queueTab.selected {
  background: linear-gradient(135deg, #6c5b8d, #719f9a);
  color: #fff;
}

.chatCard,
.tableRow,
.summaryCard {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.chatCard:hover,
.tableRow:hover,
.summaryCard:hover {
  box-shadow: 0 20px 44px rgba(85, 70, 103, 0.13);
}

.chatCard.active {
  border-color: rgba(113, 159, 154, 0.58);
  background: linear-gradient(135deg, rgba(231, 246, 243, 0.78), rgba(244, 235, 252, 0.74));
}

.msg.inbound {
  background: rgba(244, 240, 248, 0.82);
  border: 1px solid rgba(139, 113, 151, 0.12);
}

.msg.outbound {
  background: linear-gradient(135deg, rgba(218, 247, 244, 0.9), rgba(241, 235, 252, 0.86));
  border: 1px solid rgba(113,159,154,0.18);
}

.replyBox textarea,
.inputRow input,
.inputRow select,
.staffPicker {
  background: rgba(255,255,255,0.70);
  border-color: rgba(139, 113, 151, 0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
  outline-color: rgba(113,159,154,0.45);
}

.empty {
  color: #786f84;
}

.badge {
  background: rgba(243, 237, 249, 0.86);
  color: #615171;
}

.badge.blocked,
.riskPill {
  background: rgba(255, 232, 230, 0.92) !important;
  color: #a83a42 !important;
}

.payPill {
  background: rgba(255, 244, 219, 0.96) !important;
  color: #936126 !important;
}

.settingsTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.settingsTabs span {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(139, 113, 151, 0.16);
  color: #655b72;
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(85, 70, 103, 0.06);
}

.pageHeader h1,
.paneHeader h1 {
  color: #30294a;
}

.pageHeader p,
.meta,
.field,
.summary {
  color: #786f84;
}


/* v15.5 composer attachment restoration: frozen layout, restored drag/drop core UX */
.replyBox { align-items: stretch; }
.composerDropZone {
  flex: 1;
  min-height: 72px;
  border: 1px solid rgba(139, 113, 151, 0.20);
  border-radius: 18px;
  padding: 10px;
  background: rgba(255,255,255,0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.composerDropZone textarea {
  width: 100%;
  min-height: 54px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px;
}
.composerDropZone.dragActive {
  border-color: rgba(113, 159, 154, 0.72);
  background: linear-gradient(135deg, rgba(231, 246, 243, 0.86), rgba(244, 235, 252, 0.78));
  box-shadow: 0 0 0 4px rgba(113,159,154,0.12), inset 0 1px 0 rgba(255,255,255,0.82);
  transform: translateY(-1px);
}
.composerHint {
  color: var(--muted);
  font-size: 11px;
  padding: 2px 6px 0;
}
.attachmentTray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 4px 4px;
}
.attachmentChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 247, 234, 0.86);
  border: 1px solid rgba(198, 138, 53, 0.22);
  color: #6f5522;
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(85, 70, 103, 0.08);
}
.attachmentChip span { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachmentChip small { color: var(--muted); }
.removeAttachment {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: #6f5522;
  box-shadow: none;
}
.removeAttachment:hover { transform: none; box-shadow: none; filter: none; }


/* v15.6 exterior hardening: visible governance status + luxury refinement without layout mutation */
.globalStatus {
  margin-top: 12px;
  border-radius: 18px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid rgba(139, 113, 151, 0.18);
  box-shadow: 0 12px 28px rgba(85, 70, 103, 0.08), inset 0 1px 0 rgba(255,255,255,0.76);
  backdrop-filter: blur(16px) saturate(1.08);
}
.globalStatus span { color: var(--muted); }
.status-green { background: linear-gradient(135deg, rgba(227, 246, 235, 0.84), rgba(238, 248, 244, 0.66)); color: #285c45; border-color: rgba(93, 159, 117, 0.24); }
.status-orange { background: linear-gradient(135deg, rgba(255, 244, 218, 0.88), rgba(255, 236, 210, 0.62)); color: #7a511c; border-color: rgba(205, 141, 55, 0.26); }
.status-red { background: linear-gradient(135deg, rgba(255, 232, 230, 0.9), rgba(255, 244, 241, 0.68)); color: #92353c; border-color: rgba(201, 92, 99, 0.28); }

.governanceBanner {
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
}
.statusRow {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 0;
  border-top:1px solid rgba(139, 113, 151, 0.12);
}
.statusScore {
  min-width:68px;
  text-align:center;
  border-radius:999px;
  padding:8px 10px;
  font-weight:800;
  border:1px solid rgba(255,255,255,0.55);
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:
    radial-gradient(ellipse at 16% 74%, rgba(132, 159, 117, .26), transparent 20%),
    radial-gradient(ellipse at 82% 72%, rgba(239, 174, 132, .22), transparent 18%),
    linear-gradient(82deg, transparent 0 16%, rgba(255,255,255,.18) 17% 18%, transparent 19% 44%, rgba(118,151,168,.12) 45% 46%, transparent 47% 100%);
  filter: blur(.2px);
  mix-blend-mode: multiply;
}

.pageCard, .chatPane, .listPane, .profilePane {
  position: relative;
  overflow: hidden;
}
.pageCard::before, .chatPane::before, .listPane::before, .profilePane::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.20;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 221, 178, .42), transparent 24%),
    radial-gradient(circle at 94% 100%, rgba(181, 218, 213, .34), transparent 26%);
}

@media (prefers-reduced-motion: no-preference) {
  .pageCard, .chatCard, .tableRow, .summaryCard, .composerDropZone, .nav, button {
    transition-duration: .22s;
    transition-timing-function: cubic-bezier(.2,.8,.2,1);
  }
}

/* SnapPy v15.9 outbound bridge feedback */
.composerNotice {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 30px rgba(55, 48, 163, 0.08);
}
.composerNotice.success {
  color: #047857;
  background: rgba(236, 253, 245, 0.86);
  border-color: rgba(16, 185, 129, 0.28);
}
.composerNotice.warning {
  color: #9a3412;
  background: rgba(255, 247, 237, 0.9);
  border-color: rgba(249, 115, 22, 0.28);
}
.composerNotice.hidden { display: none; }


/* SnapPy v15.9 real Monet workspace pass
   Exterior refinement only: layout hierarchy, navigation, audit placement, and runtime truth paths remain frozen. */
:root {
  --monet-ink: #29213b;
  --monet-ink-soft: #655b74;
  --monet-paper: rgba(255, 252, 246, 0.78);
  --monet-glass: rgba(255, 255, 255, 0.64);
  --monet-lavender: #d9c9f0;
  --monet-violet: #8e78ad;
  --monet-cream: #fff1d2;
  --monet-gold: #d3a258;
  --monet-water: #b7dcda;
  --monet-leaf: #b8d5b4;
  --monet-rose: #efb6aa;
  --monet-shadow: rgba(66, 49, 91, 0.16);
  --monet-shadow-soft: rgba(66, 49, 91, 0.08);
  --monet-line: rgba(111, 88, 138, 0.18);
}

html { background: #f5efe8; }
body {
  color: var(--monet-ink);
  background:
    radial-gradient(ellipse at 8% 4%, rgba(255, 217, 153, 0.78), transparent 30%),
    radial-gradient(ellipse at 82% 10%, rgba(218, 199, 239, 0.72), transparent 32%),
    radial-gradient(ellipse at 90% 86%, rgba(169, 216, 211, 0.55), transparent 30%),
    radial-gradient(ellipse at 12% 88%, rgba(239, 184, 158, 0.34), transparent 26%),
    linear-gradient(135deg, #fbf4e9 0%, #f6eef8 43%, #edf7f3 100%);
}

body::before {
  opacity: 0.38;
  background:
    repeating-linear-gradient(104deg, rgba(255,255,255,.14) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(8deg, rgba(113,90,139,.055) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 23% 33%, rgba(251, 222, 158, .22), transparent 18%),
    radial-gradient(circle at 74% 28%, rgba(185, 213, 214, .20), transparent 18%);
  filter: blur(.15px);
}

body::after {
  opacity: .28;
  background:
    linear-gradient(118deg, transparent 0 17%, rgba(255,255,255,.26) 18% 19%, transparent 20% 40%, rgba(136, 112, 164, .14) 41% 42%, transparent 43% 100%),
    radial-gradient(ellipse at 16% 72%, rgba(176, 211, 171, .30), transparent 22%),
    radial-gradient(ellipse at 74% 76%, rgba(244, 188, 139, .25), transparent 21%);
  mix-blend-mode: soft-light;
}

.app { position: relative; z-index: 1; }
.sidebar {
  border-right: 1px solid var(--monet-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(249,240,250,.58)),
    radial-gradient(circle at 16% 14%, rgba(255, 210, 141, .34), transparent 28%),
    radial-gradient(circle at 86% 88%, rgba(176, 216, 211, .26), transparent 30%);
  box-shadow: 20px 0 60px rgba(75, 58, 102, .08), inset -1px 0 0 rgba(255,255,255,.55);
}
.brand {
  position: relative;
  font-size: 23px;
  color: #44345f;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.brand::after {
  content: "Operational workspace";
  display: block;
  margin-top: 5px;
  color: #81748f;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.listPane,.chatPane,.profilePane,.pageHeader,.pageCard,.summaryCard,.chatCard,.tableRow,.note,.sync,.staffMini {
  background:
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,250,242,.56)),
    radial-gradient(circle at 8% 0%, rgba(255, 226, 174, .22), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(189, 224, 220, .16), transparent 34%);
  border: 1px solid var(--monet-line);
  box-shadow:
    0 24px 70px var(--monet-shadow-soft),
    0 6px 18px rgba(66,49,91,.045),
    inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(22px) saturate(1.15);
}

.listPane,.chatPane,.profilePane,.pageCard { border-radius: 30px; }
.paneHeader,.chatHeader,.pageHeader {
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(248,238,252,.32));
}
h1,h2,h3 { letter-spacing: -.035em; color: #2f2845; }
.meta,.field,.summary,.composerHint,.pageHeader p { color: var(--monet-ink-soft); }

.nav {
  border: 1px solid transparent;
  color: #6d617c;
}
.nav.active,.nav.navActive,.nav:hover {
  background:
    linear-gradient(135deg, rgba(218, 202, 239, .82), rgba(215, 239, 234, .62)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.56), transparent 40%);
  border-color: rgba(111, 88, 138, .16);
  color: #493763;
  transform: translateY(-1px);
}

button {
  background: linear-gradient(135deg, #715c93, #719f9a 92%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 14px 30px rgba(85,70,103,.18), inset 0 1px 0 rgba(255,255,255,.28);
}
button.secondary,.queueTab,.linkButton {
  background: rgba(255,255,255,.62);
  color: #594b70;
  border: 1px solid rgba(111, 88, 138, .14);
}
button:focus-visible,.nav:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible {
  outline: 3px solid rgba(113,159,154,.24);
  outline-offset: 2px;
}

.chatCard { margin: 14px; padding: 16px; }
.chatCard.active {
  background:
    linear-gradient(135deg, rgba(226, 247, 242, .82), rgba(244, 234, 252, .78)),
    radial-gradient(circle at 90% 14%, rgba(255,255,255,.55), transparent 30%);
  box-shadow: 0 22px 52px rgba(85,70,103,.14);
}
.chatTitle { color: #2f2845; }
.queueSignals span,.badge,.draftPill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.messages {
  background:
    radial-gradient(ellipse at 24% 4%, rgba(255, 230, 185, .25), transparent 24%),
    radial-gradient(ellipse at 92% 100%, rgba(184, 221, 217, .22), transparent 26%);
}
.msg {
  box-shadow: 0 12px 28px rgba(66,49,91,.08), inset 0 1px 0 rgba(255,255,255,.58);
  border: 1px solid rgba(111,88,138,.12);
}
.msg.inbound {
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(247,241,250,.76));
}
.msg.outbound {
  background: linear-gradient(135deg, rgba(215,245,240,.92), rgba(240,232,252,.84));
  border-color: rgba(113,159,154,.22);
}
.statusText {
  display:inline-block;
  margin-left:4px;
  padding:2px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
}
.status-sent,.status-delivered,.status-received { background: rgba(236,253,245,.88); color:#047857; }
.status-failed,.status-send_failed { background: rgba(255,232,230,.88); color:#a83a42; }
.status-local_only,.status-queued { background: rgba(255,247,221,.92); color:#8a5a00; }

.replyBox {
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,248,238,.32));
}
.composerDropZone {
  background:
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,248,238,.56)),
    radial-gradient(circle at 8% 0%, rgba(255, 226, 174, .24), transparent 26%);
  border-radius: 22px;
  min-height: 86px;
}
.composerDropZone textarea { min-height: 62px; color: var(--monet-ink); }
.composerDropZone.dragActive {
  border-color: rgba(113,159,154,.78);
  background:
    linear-gradient(135deg, rgba(225,248,243,.92), rgba(246,236,253,.82)),
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.65), transparent 35%);
}
.attachmentChip { background: rgba(255,244,219,.9); }

.globalStatus,.sync {
  background: rgba(255,255,255,.54);
}
.status-green { background: linear-gradient(135deg, rgba(227,246,235,.9), rgba(238,248,244,.7)); }
.status-orange { background: linear-gradient(135deg, rgba(255,244,218,.92), rgba(255,236,210,.72)); }
.status-red { background: linear-gradient(135deg, rgba(255,232,230,.94), rgba(255,244,241,.72)); }

.empty {
  position: relative;
  border-radius: 24px;
  color: #7c7188;
}
.chatPane > .empty:first-child,
#inbox .empty,
.pageCard.empty {
  margin: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.52), rgba(248,238,252,.42)),
    radial-gradient(circle at 10% 0%, rgba(255,221,178,.28), transparent 34%);
  border: 1px dashed rgba(111,88,138,.18);
}

.settingsTabs span {
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(244,235,252,.52));
}
.tableRow:hover,.chatCard:hover,.summaryCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 58px rgba(85,70,103,.14);
}

@media (prefers-reduced-motion: no-preference) {
  .msg { animation: snapPyMessageIn .24s cubic-bezier(.2,.8,.2,1); }
  @keyframes snapPyMessageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}


/* v15.10 REAL MONET WORKSPACE PASS
   Exterior-only refinement. Layout zones remain canonical. */
:root {
  --monet-ink: #2e2941;
  --monet-ink-soft: #827792;
  --monet-violet: #7c669e;
  --monet-mauve: #d9c8ea;
  --monet-cream: #fff4df;
  --monet-sun: #f4c982;
  --monet-rose: #ebb3a6;
  --monet-water: #b8d9d7;
  --monet-mint: #dff4ed;
  --monet-line: rgba(97, 79, 122, 0.18);
  --monet-glass: rgba(255, 255, 255, 0.70);
  --monet-shadow: rgba(54, 39, 79, 0.16);
  --monet-shadow-soft: rgba(54, 39, 79, 0.075);
}

html, body { min-width: 1160px; }
body {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 10% 5%, rgba(255, 220, 156, 0.82), transparent 32%),
    radial-gradient(ellipse at 56% -8%, rgba(232, 204, 237, 0.78), transparent 38%),
    radial-gradient(ellipse at 95% 18%, rgba(189, 209, 242, 0.48), transparent 34%),
    radial-gradient(ellipse at 83% 92%, rgba(170, 220, 211, 0.56), transparent 34%),
    radial-gradient(ellipse at 2% 88%, rgba(231, 175, 145, 0.36), transparent 30%),
    linear-gradient(135deg, #fff5e6 0%, #f8edf9 46%, #eef8f4 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .52;
  background:
    repeating-linear-gradient(101deg, rgba(255,255,255,.22) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(7deg, rgba(85,68,109,.052) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 24% 22%, rgba(246, 203, 130, .28), transparent 17%),
    radial-gradient(circle at 70% 30%, rgba(175, 210, 213, .22), transparent 18%),
    radial-gradient(circle at 45% 80%, rgba(215, 185, 230, .16), transparent 25%);
  filter: blur(.22px);
  mix-blend-mode: multiply;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(112deg, transparent 0 15%, rgba(255,255,255,.34) 16% 17%, transparent 18% 42%, rgba(122,103,154,.13) 43% 44%, transparent 45%),
    radial-gradient(ellipse at 16% 73%, rgba(172, 208, 168, .33), transparent 23%),
    radial-gradient(ellipse at 78% 74%, rgba(244, 187, 139, .28), transparent 22%);
  mix-blend-mode: soft-light;
}

.app { position: relative; z-index: 1; height: 100vh; }
.sidebar {
  width: 236px;
  min-width: 236px;
  padding: 26px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.77), rgba(249,241,250,.50)),
    radial-gradient(circle at 12% 9%, rgba(255, 213, 140, .39), transparent 30%),
    radial-gradient(circle at 96% 84%, rgba(174, 220, 211, .30), transparent 33%);
  border-right: 1px solid rgba(116, 93, 143, .16);
  box-shadow: 28px 0 78px rgba(74, 57, 103, .11), inset -1px 0 0 rgba(255,255,255,.62);
  backdrop-filter: blur(24px) saturate(1.14);
}
.brand {
  font-size: 24px;
  line-height: 1;
  color: #43355d;
  margin-bottom: 34px;
  text-shadow: 0 1px 0 rgba(255,255,255,.86);
}
.brand::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  vertical-align: -9px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.88), transparent 24%),
    linear-gradient(135deg, #6f86ff, #7a63d7 42%, #83c8c0 100%);
  box-shadow: 0 16px 35px rgba(85,70,153,.24), inset 0 1px 0 rgba(255,255,255,.7);
}
.nav {
  min-height: 48px;
  margin-bottom: 9px;
  padding: 13px 16px;
  border-radius: 22px;
  color: #675b78;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nav.active, .nav.navActive, .nav:hover {
  background:
    linear-gradient(135deg, rgba(226, 212, 244, .88), rgba(218, 242, 236, .66)),
    radial-gradient(circle at 19% 17%, rgba(255,255,255,.66), transparent 41%);
  box-shadow: 0 16px 36px rgba(86, 70, 110, .12), inset 0 1px 0 rgba(255,255,255,.66);
  color: #4a3863;
}
.staffLabel { margin-top: 28px; color: #7d708b; }
.staffPicker, .inputRow input, .inputRow select, .replyBox textarea {
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(97,79,122,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}
.sync, .globalStatus, .staffMini {
  border-radius: 22px;
  background:
    linear-gradient(140deg, rgba(255,255,255,.60), rgba(245,235,252,.40)),
    radial-gradient(circle at 0 0, rgba(255,218,157,.20), transparent 32%);
}

.layout {
  grid-template-columns: minmax(390px, 440px) minmax(520px, 1fr) minmax(300px, 360px);
  gap: 18px;
  padding: 26px;
  height: 100vh;
  overflow: hidden;
}
.listPane, .chatPane, .profilePane, .pageHeader, .pageCard, .summaryCard, .chatCard, .tableRow, .note {
  background:
    linear-gradient(145deg, rgba(255,255,255,.75), rgba(255,250,244,.58)),
    radial-gradient(circle at 9% 0%, rgba(255, 227, 174, .24), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(188, 225, 219, .17), transparent 36%);
  border: 1px solid rgba(97,79,122,.16);
  box-shadow:
    0 28px 85px rgba(54, 39, 79, .10),
    0 8px 22px rgba(54, 39, 79, .045),
    inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(26px) saturate(1.18);
}
.listPane, .chatPane, .profilePane { min-height: calc(100vh - 52px); border-radius: 34px; }
.paneHeader, .chatHeader {
  min-height: 96px;
  padding: 25px 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.50), rgba(248,238,252,.34)),
    radial-gradient(circle at 10% 0%, rgba(255,226,168,.20), transparent 40%);
}
h1 { font-size: 28px; color: #322946; letter-spacing: -.055em; }
h2 { color: #342a48; }
.summary { padding: 22px 28px; font-size: 17px; line-height: 1.35; color: #786d87; }
.queueTabs { padding: 18px 22px 14px; gap: 10px; }
.queueTab {
  padding: 10px 15px;
  font-size: 14px;
  background: rgba(255,255,255,.62);
  color: #5c506f;
  border: 1px solid rgba(99,80,124,.12);
  box-shadow: 0 9px 22px rgba(54,39,79,.045), inset 0 1px 0 rgba(255,255,255,.78);
}
.queueTab.selected {
  background: linear-gradient(135deg, #73628d, #7ca29e);
  color: #fff;
  box-shadow: 0 18px 36px rgba(76, 61, 104, .22);
}
#inbox { max-height: calc(100vh - 300px); padding-bottom: 18px; }
.chatCard {
  margin: 16px 20px;
  padding: 22px 22px;
  border-radius: 28px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chatCard:hover, .chatCard.active {
  transform: translateY(-3px);
  box-shadow: 0 28px 72px rgba(54,39,79,.14), inset 0 1px 0 rgba(255,255,255,.82);
}
.chatTitle { font-size: 18px; color: #29233d; }
.badge, .queueSignals span, .draftPill, .statusText {
  border: 1px solid rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.avatarWatermark { opacity: .11; filter: blur(.1px); }

.chatPane { display: flex; flex-direction: column; }
.messages {
  flex: 1;
  height: auto;
  padding: 30px;
  gap: 18px;
  background:
    radial-gradient(ellipse at 22% 5%, rgba(255, 231, 188, .30), transparent 24%),
    radial-gradient(ellipse at 95% 104%, rgba(184, 222, 218, .25), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,250,244,.14));
}
.msg {
  max-width: 72%;
  padding: 16px 18px;
  border-radius: 24px;
  line-height: 1.45;
  font-size: 15.5px;
  box-shadow: 0 16px 36px rgba(54,39,79,.10), inset 0 1px 0 rgba(255,255,255,.66);
}
.msg.inbound {
  border-bottom-left-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(250,243,252,.78));
}
.msg.outbound {
  border-bottom-right-radius: 8px;
  background: linear-gradient(135deg, rgba(213,247,241,.92), rgba(241,232,252,.88));
}
.msgMeta { color: #81768e; font-size: 11.5px; }
.replyBox {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 14px;
  padding: 18px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,247,238,.38));
}
.replyBox.hidden { display: none; }
.composerDropZone {
  border: 1px solid rgba(97,79,122,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 12px 28px rgba(54,39,79,.05);
}
.composerHint { color: #8a7f96; font-size: 12px; }
.replyBox button { min-height: 54px; border-radius: 19px; }

.profileBlock { padding: 24px; }
.profilePane .empty, .chatHeader.empty {
  color: #81758d;
  font-size: 17px;
}
.empty {
  margin: 24px;
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.56), rgba(248,238,252,.43)),
    radial-gradient(circle at 10% 0%, rgba(255,221,178,.32), transparent 36%);
  border: 1px dashed rgba(97,79,122,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}
.status-green { border-color: rgba(63, 145, 108, .18) !important; }
.status-orange { border-color: rgba(195, 133, 40, .22) !important; }
.status-red { border-color: rgba(196, 75, 83, .22) !important; }

.pageView { height: 100vh; overflow: auto; padding: 26px; }
.pageHeader, .pageCard { border-radius: 32px; }
.summaryGrid { gap: 18px; }
.summaryCard { border-radius: 28px; }
.tableRow { border-radius: 25px; }

@media (max-width: 1320px) {
  .layout { grid-template-columns: minmax(360px, 420px) minmax(500px, 1fr); }
  .profilePane { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .nav, .chatCard, .tableRow, button, .queueTab { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
  .msg { animation: monetMessageIn .26s cubic-bezier(.2,.75,.2,1); }
  @keyframes monetMessageIn { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: translateY(0) scale(1); } }
}

/* SnapPy v15.11 MONET PHASE 2 — conversation-first product UI
   Exterior-only refinement. Core, runtime, governance, and truth paths untouched. */
:root {
  --snap-depth-1: rgba(255, 255, 255, 0.50);
  --snap-depth-2: rgba(255, 252, 246, 0.72);
  --snap-outline: rgba(83, 62, 111, 0.14);
  --snap-focus: #6f5c93;
  --snap-ink: #281f3a;
  --snap-muted: #756a82;
}

/* Make the workspace feel like one composed painting rather than three admin boxes. */
body {
  background:
    radial-gradient(ellipse at 7% 8%, rgba(255, 218, 151, 0.95), transparent 30%),
    radial-gradient(ellipse at 42% 0%, rgba(236, 207, 244, 0.88), transparent 36%),
    radial-gradient(ellipse at 98% 18%, rgba(180, 203, 244, 0.50), transparent 34%),
    radial-gradient(ellipse at 82% 100%, rgba(159, 218, 210, 0.62), transparent 36%),
    radial-gradient(ellipse at 4% 96%, rgba(232, 168, 139, 0.42), transparent 28%),
    linear-gradient(135deg, #fff4df 0%, #f8edf8 44%, #edf8f4 100%);
}

body::before {
  opacity: .60;
  background:
    repeating-linear-gradient(106deg, rgba(255,255,255,.24) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(11deg, rgba(79,61,102,.055) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 23% 19%, rgba(253, 208, 126, .30), transparent 18%),
    radial-gradient(circle at 67% 34%, rgba(181, 213, 214, .24), transparent 20%),
    radial-gradient(circle at 46% 83%, rgba(219, 188, 230, .20), transparent 24%);
  filter: blur(.18px);
}

body::after {
  opacity: .46;
  background:
    linear-gradient(112deg, transparent 0 13%, rgba(255,255,255,.40) 14% 15%, transparent 16% 42%, rgba(123, 99, 158, .14) 43% 44%, transparent 45%),
    radial-gradient(ellipse at 15% 75%, rgba(171, 208, 169, .36), transparent 24%),
    radial-gradient(ellipse at 78% 72%, rgba(244, 188, 138, .30), transparent 22%);
  mix-blend-mode: soft-light;
}

/* Rebalance: navigation supports, conversation work dominates. */
.sidebar {
  width: 202px;
  min-width: 202px;
  padding: 24px 17px;
}
.layout {
  grid-template-columns: minmax(292px, 320px) minmax(720px, 1.55fr) minmax(245px, 290px);
  gap: 20px;
  padding: 24px;
}

.brand {
  font-size: 22px;
  margin-bottom: 30px;
}
.brand::before {
  width: 30px;
  height: 30px;
  margin-right: 9px;
  border-radius: 13px;
}
.nav {
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 19px;
  font-size: 14px;
}
.staffLabel { margin-top: 22px; }
.staffPicker { padding: 9px 10px; }
.sync, .globalStatus, .staffMini { font-size: 11.5px; padding: 10px; border-radius: 18px; }

/* Let the center conversation feel like the hero surface. */
.chatPane {
  position: relative;
  border-radius: 38px;
  box-shadow:
    0 36px 105px rgba(47, 35, 73, .16),
    0 10px 28px rgba(47, 35, 73, .06),
    inset 0 1px 0 rgba(255,255,255,.90);
}
.chatPane::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 231, 186, .32), transparent 32%),
    radial-gradient(ellipse at 100% 100%, rgba(174, 224, 217, .26), transparent 34%);
  opacity: .85;
}
.chatHeader, .messages, .replyBox { position: relative; z-index: 1; }

.listPane, .profilePane {
  border-radius: 31px;
  box-shadow:
    0 22px 70px rgba(54, 39, 79, .09),
    inset 0 1px 0 rgba(255,255,255,.84);
}
.profilePane { opacity: .94; }

.paneHeader, .chatHeader {
  min-height: 86px;
  padding: 22px 24px;
}
.chatHeader {
  border-bottom: 1px solid rgba(97,79,122,.12);
}
.chatHeader b {
  font-size: 20px;
  letter-spacing: -.04em;
}
h1 { font-size: 25px; }
.summary { padding: 18px 22px; font-size: 14.5px; }
.queueTabs { padding: 16px 18px 10px; gap: 8px; }
.queueTab { padding: 8px 12px; font-size: 12.5px; }
#inbox { max-height: calc(100vh - 280px); }

.chatCard {
  margin: 14px 16px;
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.70), rgba(255,250,244,.56)),
    radial-gradient(circle at 14% 0%, rgba(255, 228, 180, .22), transparent 30%);
}
.chatCard.active {
  border-color: rgba(117, 96, 153, .30);
  background:
    linear-gradient(135deg, rgba(233, 248, 244, .92), rgba(244, 233, 252, .88)),
    radial-gradient(circle at 90% 14%, rgba(255,255,255,.62), transparent 32%);
  box-shadow: 0 28px 70px rgba(54,39,79,.16), inset 0 1px 0 rgba(255,255,255,.86);
}
.chatTitle { font-size: 16.5px; }
.queueSignals { gap: 5px; }
.queueSignals span { font-size: 11px; padding: 4px 7px; }

/* The empty conversation state should feel designed, not like blank admin space. */
#chatHeader.empty {
  margin: 24px 24px 0;
  min-height: 72px;
  border-radius: 28px;
  border: 1px solid rgba(97,79,122,.12);
  background:
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(247,237,251,.44)),
    radial-gradient(circle at 10% 0%, rgba(255, 225, 174, .30), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  color: transparent;
}
#chatHeader.empty::before {
  content: "Select a conversation";
  color: #332a46;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -.045em;
}
#chatHeader.empty::after {
  content: "Reply, attach files, and keep the audit trail intact.";
  margin-left: 14px;
  color: #7b7187;
  font-size: 13px;
  font-weight: 650;
}

.messages:empty {
  position: relative;
  min-height: 0;
}
.messages:empty::before {
  content: "";
  display: block;
  min-height: 100%;
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255, 229, 183, .38), transparent 25%),
    radial-gradient(ellipse at 86% 76%, rgba(180, 222, 217, .30), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(248,238,252,.18));
  border: 1px dashed rgba(97,79,122,.10);
}
.messages:empty::after {
  content: "A calm workspace for client conversations.";
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  color: rgba(77, 62, 102, .62);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  text-align: center;
}

.messages {
  padding: 34px;
  gap: 18px;
}
.msg {
  max-width: 68%;
  padding: 16px 19px;
  border-radius: 26px;
  font-size: 15.5px;
}
.msg.inbound { border-bottom-left-radius: 9px; }
.msg.outbound { border-bottom-right-radius: 9px; }

.replyBox {
  padding: 20px 24px 22px;
  border-top: 1px solid rgba(97,79,122,.12);
}
.composerDropZone {
  min-height: 92px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,248,237,.62)),
    radial-gradient(circle at 9% 0%, rgba(255, 225, 174, .26), transparent 28%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 14px 34px rgba(54,39,79,.06);
}
.composerDropZone textarea {
  min-height: 68px;
  font-size: 15.5px;
}
.replyBox button {
  min-width: 92px;
  min-height: 58px;
  border-radius: 22px;
}

.profileBlock { padding: 22px; }
.profileBlock h2 { font-size: 19px; }
.profilePane .empty { font-size: 14.5px; }

/* Make non-inbox pages inherit the same premium product feel. */
.pageView { padding: 24px; }
.pageHeader, .pageCard { border-radius: 34px; }
.pageHeader { min-height: 94px; }
.summaryCard, .tableRow { border-radius: 28px; }
.settingsTabs span { padding: 10px 14px; }

@media (max-width: 1440px) {
  .sidebar { width: 194px; min-width: 194px; }
  .layout { grid-template-columns: minmax(285px, 310px) minmax(660px, 1fr); }
  .profilePane { display: none; }
}

@media (max-width: 1180px) {
  html, body { min-width: 0; overflow: auto; }
  .app { min-height: 100vh; height: auto; }
  .sidebar { width: 186px; min-width: 186px; }
  .layout { grid-template-columns: minmax(280px, 330px) minmax(520px, 1fr); height: auto; min-height: 100vh; }
}

/* SnapPy v15.12 MONET UNDERWATER UI PASS
   UI/assets/theme only. Runtime, queues, governance, audit, ownership, and WhatsApp adapters untouched.
   Direction: use the attached impressionist underwater artwork as atmosphere, not decoration clutter. */
:root {
  --monet-deep-water: #183345;
  --monet-pond-ink: #203044;
  --monet-surface-gold: #f0bf72;
  --monet-coral: #e8845f;
  --monet-lily: #cfd9c7;
  --monet-water-glass: rgba(244, 252, 250, 0.68);
  --monet-water-line: rgba(81, 121, 135, 0.18);
  --monet-water-shadow: rgba(23, 49, 69, 0.18);
}

body {
  background:
    linear-gradient(135deg, rgba(255, 242, 213, 0.72), rgba(223, 239, 237, 0.48)),
    radial-gradient(ellipse at 10% 5%, rgba(250, 190, 105, 0.62), transparent 30%),
    radial-gradient(ellipse at 84% 15%, rgba(106, 157, 169, 0.44), transparent 34%),
    radial-gradient(ellipse at 78% 100%, rgba(226, 129, 87, 0.26), transparent 34%),
    url('/assets/monet-underwater-wallpaper.png') center center / cover fixed no-repeat;
}

body::before {
  opacity: .48;
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(19, 48, 68, .10)),
    repeating-linear-gradient(103deg, rgba(255,255,255,.18) 0 2px, transparent 2px 20px),
    repeating-linear-gradient(8deg, rgba(24, 51, 69, .055) 0 1px, transparent 1px 12px);
  mix-blend-mode: soft-light;
}

body::after {
  opacity: .34;
  background:
    radial-gradient(ellipse at 19% 18%, rgba(255, 220, 146, .36), transparent 25%),
    radial-gradient(ellipse at 72% 80%, rgba(230, 132, 95, .24), transparent 22%),
    linear-gradient(115deg, transparent 0 13%, rgba(255,255,255,.34) 14% 15%, transparent 16% 44%, rgba(103, 156, 166, .16) 45% 46%, transparent 47%);
  mix-blend-mode: screen;
}

.sidebar,
.listPane,
.profilePane,
.pageHeader,
.pageCard,
.summaryCard,
.chatCard,
.tableRow,
.note,
.sync,
.globalStatus,
.staffMini {
  background:
    linear-gradient(145deg, rgba(255,255,255,.70), rgba(246, 252, 248, .48)),
    radial-gradient(circle at 12% 0%, rgba(246, 191, 114, .19), transparent 31%),
    radial-gradient(circle at 104% 104%, rgba(115, 173, 173, .17), transparent 38%);
  border-color: var(--monet-water-line);
  box-shadow:
    0 28px 90px rgba(21, 48, 68, .13),
    0 8px 24px rgba(21, 48, 68, .055),
    inset 0 1px 0 rgba(255,255,255,.84);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(241, 250, 247,.48)),
    radial-gradient(circle at 16% 10%, rgba(241, 188, 108, .35), transparent 31%),
    radial-gradient(circle at 92% 84%, rgba(107, 167, 166, .24), transparent 34%);
}

.brand,
h1,
h2,
h3,
.chatHeader b,
.chatTitle {
  color: var(--monet-pond-ink);
}

.brand::before {
  background:
    radial-gradient(circle at 33% 20%, rgba(255,255,255,.88), transparent 24%),
    linear-gradient(135deg, #f0bf72 0%, #e8845f 45%, #6ea8a6 100%);
}

.nav.active,
.nav.navActive,
.nav:hover,
.chatCard.active,
.queueTab.selected {
  background:
    linear-gradient(135deg, rgba(255, 224, 164, .58), rgba(207, 233, 230, .76)),
    radial-gradient(circle at 20% 14%, rgba(255,255,255,.60), transparent 38%);
  color: #27384a;
  border-color: rgba(93, 145, 151, .22);
}

button {
  background: linear-gradient(135deg, #315a67, #6ea8a6 58%, #d99c5f 116%);
  box-shadow: 0 15px 34px rgba(25, 61, 78, .20), inset 0 1px 0 rgba(255,255,255,.30);
}

.chatPane {
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(239, 249, 247,.46)),
    url('/assets/monet-underwater-wallpaper.png') center center / cover no-repeat;
  border-color: rgba(84, 135, 143, .20);
  box-shadow:
    0 38px 115px rgba(21, 48, 68, .19),
    0 12px 32px rgba(21, 48, 68, .08),
    inset 0 1px 0 rgba(255,255,255,.90);
}

.chatPane::before {
  opacity: .58;
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(240, 250, 248,.42)),
    radial-gradient(ellipse at 21% 0%, rgba(255, 226, 172, .32), transparent 32%),
    radial-gradient(ellipse at 100% 100%, rgba(119, 178, 177, .28), transparent 36%);
  backdrop-filter: blur(3px) saturate(1.07);
}

.chatPane::after {
  opacity: .42;
  background:
    linear-gradient(112deg, transparent 0 12%, rgba(255,255,255,.36) 13% 14%, transparent 15% 40%, rgba(120, 173, 180,.18) 41% 42%, transparent 43%),
    radial-gradient(ellipse at 78% 72%, rgba(232, 132, 91,.18), transparent 23%);
}

.messages {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(234, 248, 246,.18)),
    radial-gradient(ellipse at 22% 7%, rgba(255, 229, 183, .34), transparent 25%),
    radial-gradient(ellipse at 92% 104%, rgba(117, 181, 181, .28), transparent 30%);
}

.msg {
  backdrop-filter: blur(16px) saturate(1.16);
  border-color: rgba(76, 123, 134, .15);
  box-shadow:
    0 18px 42px rgba(20, 45, 64, .12),
    inset 0 1px 0 rgba(255,255,255,.70);
}

.msg.inbound {
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(245, 251, 249,.76));
}

.msg.outbound {
  background: linear-gradient(135deg, rgba(211, 243, 238,.94), rgba(255, 237, 202,.78));
  border-color: rgba(94, 158, 156, .24);
}

.replyBox {
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(238, 249, 247,.36));
}

.composerDropZone {
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(247, 252, 247,.66)),
    radial-gradient(circle at 9% 0%, rgba(255, 213, 143, .28), transparent 29%);
  border-color: rgba(76, 123, 134, .17);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 16px 38px rgba(20,45,64,.08);
}

.composerDropZone.dragActive {
  background:
    linear-gradient(135deg, rgba(233, 251, 246,.94), rgba(255, 244, 218,.82)),
    radial-gradient(circle at 32% 18%, rgba(255,255,255,.68), transparent 36%);
  border-color: rgba(94, 158, 156, .70);
}

#chatHeader.empty::before {
  content: "Select a conversation";
  color: var(--monet-pond-ink);
}
#chatHeader.empty::after {
  content: "A quiet water-lit workspace for client messages.";
  color: #667987;
}
.messages:empty::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(230,246,244,.24)),
    url('/assets/monet-underwater-wallpaper.png') center center / cover no-repeat;
  opacity: .72;
  border: 1px solid rgba(84,135,143,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
}
.messages:empty::after {
  content: "Messages are the product.";
  color: rgba(31, 62, 79, .70);
  text-shadow: 0 1px 0 rgba(255,255,255,.70);
}

.empty {
  background:
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(236, 249, 246,.42)),
    radial-gradient(circle at 10% 0%, rgba(255, 216, 148,.32), transparent 36%);
  border-color: rgba(84,135,143,.16);
}

@media (prefers-reduced-motion: no-preference) {
  body::after { animation: snappyWaterLightDrift 18s ease-in-out infinite alternate; }
  .chatPane::after { animation: snappyWaterLightDrift 14s ease-in-out infinite alternate; }
  @keyframes snappyWaterLightDrift {
    from { transform: translate3d(-6px, -3px, 0) scale(1.01); }
    to { transform: translate3d(7px, 4px, 0) scale(1.025); }
  }
}


/* SnapPy v15.11.3 MONET WORKSPACE DEEPENING
   UI-only refinement. No runtime, governance, queue, audit, ownership, or WhatsApp adapter changes.
   Goal: make the conversation workspace resemble the provided underwater Monet references rather than a themed dashboard. */
:root {
  --snappy-water-ink: #17364a;
  --snappy-water-ink-soft: #587384;
  --snappy-surface-cream: rgba(255, 248, 229, 0.76);
  --snappy-aqua-glass: rgba(231, 249, 247, 0.66);
  --snappy-gold-light: rgba(244, 191, 114, 0.48);
  --snappy-coral-light: rgba(230, 132, 95, 0.24);
}

/* The product should read as one atmospheric workspace, not separate admin cards. */
.app {
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 16%, transparent 84%, rgba(255,255,255,.12)),
    radial-gradient(ellipse at 48% 0%, rgba(255, 230, 176, .30), transparent 32%);
}

.sidebar {
  width: 188px;
  min-width: 188px;
}

.layout {
  grid-template-columns: minmax(260px, 292px) minmax(820px, 1.9fr) minmax(210px, 250px);
  gap: 18px;
}

.listPane {
  opacity: .96;
}

.profilePane {
  opacity: .86;
}

.chatPane {
  isolation: isolate;
  border-radius: 44px;
  overflow: hidden;
  transform: translateZ(0);
  box-shadow:
    0 44px 140px rgba(16, 45, 64, .24),
    0 14px 40px rgba(16, 45, 64, .10),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 0 0 1px rgba(255,255,255,.42);
}

.chatPane::before {
  z-index: 0;
  opacity: .70;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(229, 248, 246,.44) 46%, rgba(239, 250, 247,.54)),
    radial-gradient(ellipse at 16% 3%, rgba(255, 226, 168,.40), transparent 33%),
    radial-gradient(ellipse at 92% 92%, rgba(112, 178, 178,.31), transparent 36%),
    linear-gradient(108deg, transparent 0 17%, rgba(255,255,255,.30) 18% 19%, transparent 20% 46%, rgba(131, 190, 194,.16) 47% 48%, transparent 49%);
  backdrop-filter: blur(4px) saturate(1.1);
}

.chatPane::after {
  z-index: 0;
  opacity: .56;
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 240, 199,.34), transparent 24%),
    radial-gradient(ellipse at 78% 78%, rgba(230, 132, 95,.20), transparent 23%),
    repeating-linear-gradient(103deg, rgba(255,255,255,.20) 0 2px, transparent 2px 28px);
  mix-blend-mode: screen;
}

.chatHeader,
.messages,
.replyBox {
  position: relative;
  z-index: 2;
}

.chatHeader {
  min-height: 92px;
  border-bottom: 1px solid rgba(80, 126, 137, .13);
  background:
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(235, 249, 247,.36)),
    radial-gradient(circle at 10% 0%, rgba(255, 226, 172,.28), transparent 38%);
}

.chatHeader b {
  font-size: 22px;
  color: var(--snappy-water-ink);
}

.messages {
  padding: 34px 42px;
  gap: 20px;
  background:
    radial-gradient(ellipse at 24% 0%, rgba(255, 231, 188,.34), transparent 28%),
    radial-gradient(ellipse at 98% 100%, rgba(118, 184, 183,.30), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(231, 248, 245,.24));
}

.msg {
  max-width: min(680px, 74%);
  border-radius: 27px;
  color: #223446;
}

.msg.inbound {
  border-bottom-left-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(243, 250, 248,.78)),
    radial-gradient(circle at 0% 0%, rgba(255, 231, 184,.20), transparent 36%);
}

.msg.outbound {
  border-bottom-right-radius: 9px;
  background:
    linear-gradient(135deg, rgba(211, 244, 238,.94), rgba(255, 239, 207,.83)),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.54), transparent 34%);
}

.msgBody {
  white-space: pre-wrap;
}

.messageImageFrame {
  margin: 0 0 10px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(83, 132, 143, .18);
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}
.messageImageFrame img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}
.messageImageFrame figcaption {
  padding: 8px 11px;
  color: var(--snappy-water-ink-soft);
  font-size: 11px;
  font-weight: 700;
}
.messageImagePlaceholder,
.messageFileFrame {
  display: grid;
  gap: 4px;
  padding: 18px;
  margin-bottom: 10px;
  border-radius: 22px;
  border: 1px dashed rgba(83, 132, 143, .24);
  background: linear-gradient(135deg, rgba(255,255,255,.70), rgba(231,249,247,.54));
  color: var(--snappy-water-ink);
}
.messageImagePlaceholder small,
.messageFileFrame small {
  color: var(--snappy-water-ink-soft);
}

.replyBox {
  padding: 20px 26px 24px;
  border-top: 1px solid rgba(80, 126, 137, .13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(232, 248, 246,.42)),
    radial-gradient(ellipse at 16% 0%, rgba(255, 226, 168,.24), transparent 35%);
}

.composerDropZone {
  min-height: 104px;
  border-radius: 30px;
}

.composerDropZone textarea {
  font-size: 16px;
}

.replyBox button {
  min-width: 104px;
  min-height: 64px;
  border-radius: 25px;
}

/* Empty state: make it image-led and product-grade. */
#chatHeader.empty {
  color: transparent;
}

.messages:empty::before {
  min-height: 100%;
  border-radius: 36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(228, 247, 244,.20)),
    url('/assets/monet-underwater-wallpaper.png') center center / cover no-repeat;
  border: 1px solid rgba(84,135,143,.16);
  opacity: .82;
  filter: saturate(1.04) contrast(.98);
}

.messages:empty::after {
  content: "Messages are the product.";
  padding: 18px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 18px 50px rgba(18, 52, 72,.14), inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(1.1);
  color: rgba(24, 51, 69, .78);
}

@media (max-width: 1520px) {
  .layout { grid-template-columns: minmax(250px, 282px) minmax(680px, 1fr); }
  .profilePane { display: none; }
}

@media (max-width: 1180px) {
  .sidebar { width: 176px; min-width: 176px; }
  .layout { grid-template-columns: minmax(252px, 292px) minmax(520px, 1fr); padding: 18px; }
  .messages { padding: 24px; }
}

/* SnapPy v15.11.4 MONET TECHNIQUE LAYER
   UI-only refinement. No runtime, governance, queues, audit, ownership, storage, or WhatsApp adapter changes.
   Research translation:
   - Broken color becomes layered, unblended light fields instead of flat solid surfaces.
   - Short brushwork becomes fine directional texture on panels and message surfaces.
   - Colored shadows replace grey shadows.
   - Water Lilies composition becomes immersive surface/depth: fewer hard horizons, more reflection and atmosphere.
*/
:root {
  --monet-deep-water: #14394a;
  --monet-blue-green: #4f8790;
  --monet-lily-green: #90b48f;
  --monet-willow-violet: #8872a6;
  --monet-sun-cream: #ffe5ad;
  --monet-rose-reflection: #e8a18a;
  --monet-shadow-violet: rgba(92, 73, 124, .22);
  --monet-shadow-teal: rgba(35, 105, 116, .18);
}

body {
  background:
    radial-gradient(ellipse at 18% 7%, rgba(255, 232, 179, .66), transparent 28%),
    radial-gradient(ellipse at 78% 12%, rgba(144, 180, 143, .28), transparent 31%),
    radial-gradient(ellipse at 84% 88%, rgba(79, 135, 144, .36), transparent 35%),
    radial-gradient(ellipse at 6% 82%, rgba(136, 114, 166, .26), transparent 32%),
    linear-gradient(135deg, #fff8e9 0%, #edf7f4 36%, #e7edf8 68%, #f7ecf2 100%);
}

body::before {
  opacity: .38;
  background:
    repeating-linear-gradient(99deg, rgba(255,255,255,.18) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(23deg, rgba(79,135,144,.08) 0 2px, transparent 2px 19px),
    radial-gradient(ellipse at 48% 28%, rgba(255,255,255,.24), transparent 45%);
  mix-blend-mode: soft-light;
}

body::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: .32;
  background:
    linear-gradient(106deg, transparent 0 13%, rgba(255, 244, 205, .42) 14% 15%, transparent 16% 34%, rgba(255,255,255,.22) 35% 36%, transparent 37% 100%),
    radial-gradient(ellipse at 45% 0%, rgba(255, 227, 169, .40), transparent 32%);
  mix-blend-mode: screen;
}

.app,
.pageView,
.layout {
  position: relative;
  z-index: 1;
}

.sidebar,
.listPane,
.chatPane,
.profilePane,
.pageHeader,
.pageCard,
.summaryCard,
.chatCard,
.tableRow,
.note,
.sync,
.staffMini {
  border-color: rgba(255,255,255,.42);
  box-shadow:
    0 28px 90px var(--monet-shadow-teal),
    0 12px 34px var(--monet-shadow-violet),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(74, 126, 134, .08);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 250, 235, .74), rgba(232, 247, 244, .50)),
    radial-gradient(circle at 18% 11%, rgba(255, 223, 161, .40), transparent 34%),
    repeating-linear-gradient(108deg, rgba(136,114,166,.08) 0 1px, transparent 1px 16px);
}

.brand {
  color: var(--monet-deep-water);
  letter-spacing: -.05em;
  text-shadow: 0 1px 0 rgba(255,255,255,.68);
}

.nav {
  color: rgba(20, 57, 74, .68);
}
.nav.active,
.nav:hover,
.navActive {
  background:
    linear-gradient(135deg, rgba(255, 229, 173, .46), rgba(221, 246, 241, .64)),
    radial-gradient(circle at 8% 10%, rgba(255,255,255,.56), transparent 36%);
  color: var(--monet-deep-water);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 22px rgba(35,105,116,.10);
}

.layout {
  grid-template-columns: minmax(245px, 280px) minmax(860px, 2.15fr) minmax(190px, 226px);
}

.chatPane {
  border-radius: 48px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(225, 245, 242, .38)),
    url('/assets/monet-underwater-wallpaper.png') center center / cover no-repeat;
  box-shadow:
    0 58px 170px rgba(18, 57, 74, .30),
    0 16px 54px rgba(100, 82, 131, .16),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 0 0 1px rgba(255,255,255,.46);
}

.chatPane::before {
  opacity: .82;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(232,249,246,.46) 44%, rgba(226, 242, 241,.58)),
    radial-gradient(ellipse at 14% 1%, rgba(255, 232, 179, .62), transparent 34%),
    radial-gradient(ellipse at 77% 91%, rgba(79, 135, 144, .38), transparent 36%),
    radial-gradient(ellipse at 103% 29%, rgba(232, 161, 138, .23), transparent 30%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.20) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(29deg, rgba(20,57,74,.045) 0 1px, transparent 1px 18px);
  mix-blend-mode: normal;
}

.chatPane::after {
  opacity: .64;
  background:
    linear-gradient(108deg, transparent 0 10%, rgba(255, 246, 215,.54) 11% 12%, transparent 13% 28%, rgba(255,255,255,.25) 29% 30%, transparent 31% 52%, rgba(79,135,144,.18) 53% 54%, transparent 55%),
    radial-gradient(ellipse at 33% 15%, rgba(255, 232, 179, .42), transparent 25%),
    radial-gradient(ellipse at 70% 76%, rgba(144, 180, 143, .22), transparent 26%);
  mix-blend-mode: screen;
}

.chatHeader {
  min-height: 104px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.64), rgba(232, 249, 246,.38)),
    radial-gradient(ellipse at 14% -12%, rgba(255, 230, 173,.52), transparent 46%),
    repeating-linear-gradient(111deg, rgba(20,57,74,.045) 0 1px, transparent 1px 14px);
}
.chatHeader b {
  font-size: 24px;
  letter-spacing: -.045em;
}
.chatHeader .meta {
  color: rgba(20, 57, 74, .56);
}

.messages {
  padding: 40px 52px;
  gap: 22px;
  background:
    radial-gradient(ellipse at 22% 4%, rgba(255, 232, 179,.42), transparent 30%),
    radial-gradient(ellipse at 96% 104%, rgba(79,135,144,.34), transparent 34%),
    radial-gradient(ellipse at 74% 55%, rgba(232,161,138,.13), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(231, 248, 245,.24));
}

.msg {
  max-width: min(720px, 72%);
  padding: 15px 17px;
  border: 1px solid rgba(255,255,255,.54);
  box-shadow:
    0 18px 48px rgba(20,57,74,.12),
    0 6px 18px rgba(136,114,166,.08),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(12px) saturate(1.12);
}
.msg.inbound {
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(239, 250, 247,.76)),
    radial-gradient(circle at 0% 0%, rgba(255, 232, 179,.28), transparent 39%),
    repeating-linear-gradient(21deg, rgba(79,135,144,.045) 0 1px, transparent 1px 11px);
}
.msg.outbound {
  background:
    linear-gradient(135deg, rgba(205, 239, 234,.95), rgba(255, 239, 207,.82)),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.55), transparent 35%),
    repeating-linear-gradient(112deg, rgba(136,114,166,.05) 0 1px, transparent 1px 13px);
}
.msgMeta {
  color: rgba(20,57,74,.50);
}

.replyBox {
  padding: 22px 30px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(231, 248, 245,.48)),
    radial-gradient(ellipse at 18% 0%, rgba(255, 229, 173,.34), transparent 38%),
    repeating-linear-gradient(104deg, rgba(255,255,255,.16) 0 2px, transparent 2px 22px);
}
.replyBox textarea,
.composerDropZone {
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(238, 250, 247,.70)),
    radial-gradient(circle at 6% 0%, rgba(255,230,173,.22), transparent 34%);
  border-color: rgba(255,255,255,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 16px 42px rgba(20,57,74,.10);
}
.replyBox button {
  background:
    linear-gradient(135deg, #17394a, #4f8790 56%, #7fae9b);
  box-shadow: 0 16px 42px rgba(20,57,74,.24), inset 0 1px 0 rgba(255,255,255,.28);
}

.chatCard {
  background:
    linear-gradient(135deg, rgba(255,255,255,.76), rgba(235, 248, 246,.54)),
    radial-gradient(circle at 0% 0%, rgba(255,232,179,.22), transparent 35%);
}
.chatCard.active {
  background:
    linear-gradient(135deg, rgba(255, 236, 190,.72), rgba(223, 246, 241,.78)),
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.54), transparent 34%);
  border-color: rgba(79,135,144,.42);
}
.chatTitle {
  color: var(--monet-deep-water);
  letter-spacing: -.025em;
}
.badge,
.queueTab {
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.48);
}
.queueTab.selected {
  background: linear-gradient(135deg, var(--monet-deep-water), var(--monet-blue-green));
}

.messages:empty::before {
  filter: saturate(1.10) contrast(.98) brightness(1.03);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.50),
    inset 0 0 90px rgba(255, 232, 179,.20),
    0 28px 86px rgba(20,57,74,.17);
}
.messages:empty::after {
  content: "A quiet water-lit workspace for client conversations.";
  color: rgba(20, 57, 74, .76);
}

.messageImageFrame {
  border-radius: 26px;
  border-color: rgba(255,255,255,.56);
  background:
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(230,247,244,.58));
  box-shadow: 0 16px 44px rgba(20,57,74,.14), inset 0 1px 0 rgba(255,255,255,.84);
}
.messageImageFrame img {
  filter: saturate(1.06) contrast(.98) brightness(1.02);
}

@media (prefers-reduced-motion: no-preference) {
  body::after { animation: monetLightBreath 24s ease-in-out infinite alternate; }
  .chatPane::after { animation: monetLightBreath 18s ease-in-out infinite alternate; }
  @keyframes monetLightBreath {
    from { transform: translate3d(-7px, -4px, 0) scale(1.01); }
    to { transform: translate3d(8px, 5px, 0) scale(1.025); }
  }
}

@media (max-width: 1520px) {
  .layout { grid-template-columns: minmax(238px, 276px) minmax(680px, 1fr); }
}

@media (max-width: 1180px) {
  .messages { padding: 28px; }
  .msg { max-width: min(640px, 78%); }
}


/* SnapPy v15.11.5 MONET SETTINGS ARCHITECTURE
   UI-only settings pass. Goal: breathe Monet into the control room without sacrificing readability.
   Runtime, queues, governance, audit, ownership, and WhatsApp adapters untouched. */
#adminView.monetSettingsView {
  min-height: 100vh;
  padding: 28px 34px 36px;
  color: #f7ecd1;
  background:
    linear-gradient(180deg, rgba(5, 16, 29, .92), rgba(10, 31, 45, .88) 48%, rgba(11, 26, 40, .94)),
    radial-gradient(ellipse at 14% 6%, rgba(255, 223, 158, .36), transparent 30%),
    radial-gradient(ellipse at 82% 18%, rgba(142, 113, 190, .26), transparent 32%),
    radial-gradient(ellipse at 72% 88%, rgba(56, 137, 146, .30), transparent 36%),
    url('/assets/monet-underwater-wallpaper.png') center center / cover fixed no-repeat;
  overflow: auto;
}

#adminView.monetSettingsView::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(4, 12, 22, .44), transparent 32%, rgba(3, 10, 18, .36)),
    repeating-linear-gradient(102deg, rgba(255,255,255,.10) 0 1px, transparent 1px 18px),
    radial-gradient(ellipse at 42% 10%, rgba(255, 235, 187, .22), transparent 34%);
  mix-blend-mode: screen;
  opacity: .72;
}

#adminView.monetSettingsView > * {
  position: relative;
  z-index: 1;
}

#adminView.monetSettingsView .pageHeader {
  min-height: 172px;
  border-radius: 32px;
  padding: 30px 36px;
  margin-bottom: 20px;
  color: #f9efd4;
  background:
    linear-gradient(105deg, rgba(6, 17, 31, .86), rgba(22, 53, 70, .66) 52%, rgba(8, 22, 36, .82)),
    radial-gradient(ellipse at 8% 5%, rgba(255, 222, 155, .48), transparent 36%),
    radial-gradient(ellipse at 90% 22%, rgba(150, 116, 190, .24), transparent 40%),
    url('/assets/monet-underwater-wallpaper.png') center 42% / cover no-repeat;
  border: 1px solid rgba(244, 228, 190, .34);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .32),
    0 14px 38px rgba(39, 112, 122, .16),
    inset 0 1px 0 rgba(255,255,255,.24);
  overflow: hidden;
}

#adminView.monetSettingsView .pageHeader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(108deg, transparent 0 12%, rgba(255, 241, 198, .24) 13% 14%, transparent 15% 36%, rgba(255,255,255,.12) 37% 38%, transparent 39%),
    radial-gradient(ellipse at 22% 0%, rgba(255, 229, 173, .26), transparent 38%);
  mix-blend-mode: screen;
}

#adminView.monetSettingsView .pageHeader h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 500;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: #fff1c8;
  text-shadow: 0 3px 22px rgba(255, 219, 151, .18);
}

#adminView.monetSettingsView .pageHeader p {
  max-width: 760px;
  margin-top: 10px;
  color: rgba(247, 236, 209, .82);
  font-size: 15px;
  letter-spacing: .04em;
}

#adminView.monetSettingsView .pageHeader button {
  background: linear-gradient(135deg, rgba(255, 235, 185, .96), rgba(111, 169, 158, .94));
  color: #102636;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 18px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.42);
}

#adminView.monetSettingsView .settingsTabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 12px;
  margin: 0 0 20px;
}

#adminView.monetSettingsView .settingsTabs span {
  min-height: 58px;
  display: flex;
  align-items: flex-end;
  padding: 13px 15px;
  border-radius: 18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  letter-spacing: .035em;
  color: #fff0ca;
  background:
    linear-gradient(145deg, rgba(14, 35, 52, .86), rgba(31, 67, 82, .58)),
    radial-gradient(ellipse at 12% 10%, rgba(255, 224, 160, .30), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(98, 165, 159, .22), transparent 44%);
  border: 1px solid rgba(242, 225, 188, .22);
  box-shadow: 0 18px 42px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.16);
}

#adminView.monetSettingsView .pageCard {
  margin-bottom: 18px;
  min-height: unset;
  color: #f7ecd1;
  background:
    linear-gradient(145deg, rgba(9, 25, 40, .76), rgba(20, 50, 64, .60)),
    radial-gradient(ellipse at 0% 0%, rgba(255, 224, 160, .18), transparent 38%),
    radial-gradient(ellipse at 100% 100%, rgba(94, 160, 154, .18), transparent 44%);
  border: 1px solid rgba(242, 225, 188, .24);
  border-radius: 28px;
  box-shadow:
    0 28px 78px rgba(0, 0, 0, .24),
    0 8px 28px rgba(42, 121, 132, .13),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(18px) saturate(1.08);
}

#adminView.monetSettingsView .pageCard h2 {
  margin: 0 0 8px;
  padding-bottom: 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .035em;
  color: #fff0ca;
  border-bottom: 1px solid rgba(242, 225, 188, .18);
}

#adminView.monetSettingsView .meta,
#adminView.monetSettingsView .field,
#adminView.monetSettingsView .summary,
#adminView.monetSettingsView .smallEmpty {
  color: rgba(247, 236, 209, .72);
}

#adminView.monetSettingsView .smallEmpty,
#adminView.monetSettingsView .note,
#adminView.monetSettingsView .tableRow {
  background:
    linear-gradient(135deg, rgba(255, 248, 229, .12), rgba(194, 229, 224, .10)),
    radial-gradient(ellipse at 8% 0%, rgba(255, 226, 165, .12), transparent 36%);
  border: 1px solid rgba(242, 225, 188, .18);
  color: rgba(247, 236, 209, .86);
}

#adminView.monetSettingsView .tableRow b,
#adminView.monetSettingsView .note b {
  color: #fff0ca;
}

#adminView.monetSettingsView .badge {
  color: #102636;
  background: linear-gradient(135deg, rgba(255, 235, 185, .92), rgba(184, 217, 202, .86));
  border: 1px solid rgba(255,255,255,.28);
}

#adminView.monetSettingsView .inputRow input,
#adminView.monetSettingsView .inputRow select,
#adminView.monetSettingsView input,
#adminView.monetSettingsView select {
  color: #112838;
  background: rgba(255, 250, 237, .92);
  border: 1px solid rgba(255, 238, 199, .50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 28px rgba(0,0,0,.10);
}

#adminView.monetSettingsView input::placeholder {
  color: rgba(31, 51, 66, .56);
}

#adminView.monetSettingsView button,
#adminView.monetSettingsView button.secondary {
  background: linear-gradient(135deg, #fff0c6, #7fb7aa 62%, #476f89);
  color: #102636;
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 14px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.36);
}

#adminView.monetSettingsView .warningBox {
  background: rgba(70, 28, 36, .64);
  border-color: rgba(255, 188, 174, .34);
  color: #ffe1d8;
}

@media (min-width: 1280px) {
  #adminView.monetSettingsView {
    display: block;
  }
  #adminView.monetSettingsView .pageCard {
    max-width: 1180px;
  }
}

@media (max-width: 900px) {
  #adminView.monetSettingsView { padding: 18px; }
  #adminView.monetSettingsView .pageHeader { min-height: 140px; padding: 22px; }
  #adminView.monetSettingsView .settingsTabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* v15.11.6 view isolation fix
   Settings must appear only when the left Settings nav is selected.
   This overrides the high-specificity Monet settings media rule so hidden remains authoritative. */
#adminView.monetSettingsView.hidden,
.pageView.hidden,
.layout.hidden {
  display: none !important;
}


/* v15.11.7 active workspace guard
   Only the selected left-nav workspace may be visible. Inactive panels retract to their normal hidden state.
   This protects view routing from high-specificity Monet atmosphere rules. */
body[data-active-view="inbox"] #summaryView,
body[data-active-view="inbox"] #documentsView,
body[data-active-view="inbox"] #auditView,
body[data-active-view="inbox"] #adminView,
body[data-active-view="summary"] #mainInboxView,
body[data-active-view="summary"] #documentsView,
body[data-active-view="summary"] #auditView,
body[data-active-view="summary"] #adminView,
body[data-active-view="documents"] #mainInboxView,
body[data-active-view="documents"] #summaryView,
body[data-active-view="documents"] #auditView,
body[data-active-view="documents"] #adminView,
body[data-active-view="audit"] #mainInboxView,
body[data-active-view="audit"] #summaryView,
body[data-active-view="audit"] #documentsView,
body[data-active-view="audit"] #adminView,
body[data-active-view="admin"] #mainInboxView,
body[data-active-view="admin"] #summaryView,
body[data-active-view="admin"] #documentsView,
body[data-active-view="admin"] #auditView,
#mainInboxView[hidden],
#summaryView[hidden],
#documentsView[hidden],
#auditView[hidden],
#adminView[hidden] {
  display: none !important;
}

body[data-active-view="inbox"] #mainInboxView:not([hidden]) {
  display: grid !important;
}

body[data-active-view="summary"] #summaryView:not([hidden]),
body[data-active-view="documents"] #documentsView:not([hidden]),
body[data-active-view="audit"] #auditView:not([hidden]),
body[data-active-view="admin"] #adminView:not([hidden]) {
  display: block !important;
}

/* v15.12 operational clarity: remove line-texture noise and make filters calm. */
body::before {
  opacity: 0.12;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(255, 238, 190, 0.18), transparent 38%),
    radial-gradient(ellipse at 72% 78%, rgba(111, 178, 170, 0.14), transparent 42%);
  mix-blend-mode: soft-light;
}

.staffMiniButton {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
}

.messagingHealthButton {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.24);
  color: inherit;
}

.globalStatus.status-green,
.messagingHealthCard.status-green {
  background: linear-gradient(135deg, rgba(19, 128, 90, .14), rgba(195, 236, 219, .34));
  border-color: rgba(34, 197, 94, .32);
  color: #12543a;
}

.globalStatus.status-red,
.messagingHealthCard.status-red {
  background: linear-gradient(135deg, rgba(159, 18, 57, .16), rgba(255, 226, 226, .44));
  border-color: rgba(220, 38, 38, .34);
  color: #7f1d1d;
}

#adminView.monetSettingsView .messagingHealthCard.status-green,
#adminView.monetSettingsView .messagingHealthCard.status-red,
#adminView.monetSettingsView .issueSummary,
#adminView.monetSettingsView .issueResolution {
  padding: 14px;
  border-radius: 20px;
  margin: 10px 0;
  border: 1px solid rgba(242, 225, 188, .22);
  background: linear-gradient(135deg, rgba(255, 248, 229, .14), rgba(194, 229, 224, .10));
  color: rgba(247, 236, 209, .92);
}

#adminView.monetSettingsView .issueResolution h3 {
  margin: 12px 0 8px;
  color: #fff0ca;
}

#adminView.monetSettingsView .issueResolution ol {
  margin: 0 0 12px;
  padding-left: 18px;
}

.queueDropdownHost {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: center;
  padding: 12px 14px;
}

.filterDropdownLabel {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.filterDropdown {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  color: var(--text);
  background: rgba(255,255,255,.74);
  font-weight: 750;
}

.filterHint {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

/* v15.12.3 Intelligence navigation layer */
.actionableRow { cursor: pointer; }
.actionableRow .openHint {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.actionableRow:hover .openHint { color: var(--accent); }
.intelligenceMetric {
  border: 1px solid var(--line);
  cursor: default;
  text-align: left;
  align-items: flex-start;
}
.intelligenceMetric small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.messageHighlight {
  outline: 2px solid rgba(197, 154, 79, .75);
  box-shadow: 0 0 0 6px rgba(197, 154, 79, .16), 0 18px 45px rgba(24, 32, 47, .18);
  transition: box-shadow .25s ease, outline-color .25s ease;
}

/* v15.12.4 ownership + release workflow */
.ownershipBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ownershipBadge.owner {
  background: rgba(52, 211, 153, 0.16);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.ownershipBadge.unassigned {
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.32);
}
.ownershipBadge.readonly {
  background: rgba(99, 102, 241, 0.14);
  color: #3730a3;
  border: 1px solid rgba(99, 102, 241, 0.28);
}
button.dangerSoft {
  border-color: rgba(190, 24, 93, 0.34);
  color: #9f1239;
  background: rgba(255, 241, 242, 0.74);
}
button:disabled,
button[disabled] {
  opacity: 0.54;
  cursor: not-allowed;
}
.composerDropZone.composerLocked {
  opacity: 0.78;
  background: rgba(248, 250, 252, 0.62);
  border-style: dashed;
}
.composerDropZone.composerLocked textarea {
  cursor: not-allowed;
}

/* v15.13.2 MONET UI IMPLEMENTATION
   Exterior-only refinement. Product constitution and protected core remain frozen.
   Goal: make real SnapPy screens match the Monet source-of-truth without creative drift. */
:root {
  --monet-paper: rgba(255, 252, 246, 0.78);
  --monet-paper-strong: rgba(255, 255, 255, 0.84);
  --monet-quiet-line: rgba(77, 112, 126, 0.16);
  --monet-text: #183345;
  --monet-muted: #5f7480;
  --monet-soft-gold: rgba(244, 191, 114, 0.30);
  --monet-soft-water: rgba(174, 224, 217, 0.34);
}

/* The app should feel like a calm workspace, not a control panel. */
body {
  color: var(--monet-text);
}

.sidebar {
  width: 198px;
  min-width: 198px;
  padding: 24px 18px;
}

.nav {
  font-weight: 760;
  letter-spacing: -0.01em;
}

.layout {
  grid-template-columns: minmax(300px, 330px) minmax(760px, 1.85fr) minmax(240px, 285px);
}

/* Conversation list refinement: people, preview, time. No scoreboards. */
.chatCard {
  margin: 13px 15px;
  padding: 16px 17px;
  border-radius: 25px;
}
.chatTitle {
  align-items: flex-start;
  gap: 12px;
}
.chatTitle > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatTime {
  flex-shrink: 0;
  max-width: 92px;
  color: var(--monet-muted);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
  font-weight: 700;
}
.chatPreview {
  margin-top: 7px;
  color: #4e6270;
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatMetaLine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--monet-muted);
  font-size: 11.5px;
  font-weight: 720;
}
.statusPillGroup {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 20px;
}
.badge.unassigned {
  background: rgba(255, 240, 205, .84);
  color: #7a4b05;
  border-color: rgba(202, 138, 4, .18);
}
.badge.needsReply {
  background: rgba(230, 247, 243, .88);
  color: #1d5f66;
  border-color: rgba(94, 158, 156, .22);
}
.badge.deliveryIssue {
  background: rgba(255, 232, 230, .90);
  color: #9b2f36;
  border-color: rgba(201, 92, 99, .22);
}
.queueSignals {
  display: none !important;
}

/* Center conversation is the product. Give it the strongest composition. */
.chatPane {
  border-radius: 42px;
}
.messages {
  padding: 36px 44px;
}
.msg {
  max-width: min(690px, 70%);
}
.replyBox {
  padding: 18px 24px 22px;
}
.composerHint {
  opacity: .78;
}

/* Settings realignment: calm light Monet workspace, not dark admin console. */
#adminView.monetSettingsView {
  padding: 24px;
  color: var(--monet-text);
  background:
    linear-gradient(135deg, rgba(255, 250, 240, .78), rgba(234, 248, 246, .62)),
    radial-gradient(ellipse at 22% 8%, var(--monet-soft-gold), transparent 34%),
    radial-gradient(ellipse at 82% 78%, var(--monet-soft-water), transparent 36%),
    url('/assets/monet-underwater-wallpaper.png') center center / cover fixed no-repeat;
}
#adminView.monetSettingsView::before {
  opacity: .20;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(255,255,255,.45), transparent 38%),
    linear-gradient(115deg, transparent 0 20%, rgba(255,255,255,.24) 21% 22%, transparent 23% 52%, rgba(103, 156, 166, .10) 53% 54%, transparent 55%);
  mix-blend-mode: screen;
}
#adminView.monetSettingsView .pageHeader {
  min-height: 116px;
  margin-bottom: 18px;
  padding: 24px 30px;
  color: var(--monet-text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255, 250, 241, .58)),
    radial-gradient(ellipse at 12% 0%, rgba(244,191,114,.22), transparent 40%);
  border: 1px solid var(--monet-quiet-line);
  box-shadow: 0 24px 68px rgba(21,48,68,.12), inset 0 1px 0 rgba(255,255,255,.84);
}
#adminView.monetSettingsView .pageHeader h1 {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 32px;
  font-weight: 850;
  letter-spacing: -0.055em;
  text-transform: none;
  color: var(--monet-text);
  text-shadow: none;
}
#adminView.monetSettingsView .pageHeader p {
  margin-top: 7px;
  max-width: 720px;
  color: var(--monet-muted);
  font-size: 14px;
  letter-spacing: 0;
}
#adminView.monetSettingsView .pageHeader button {
  background: linear-gradient(135deg, #315a67, #77aaa4 88%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(21,48,68,.16), inset 0 1px 0 rgba(255,255,255,.28);
}
#adminView.monetSettingsView .settingsTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
#adminView.monetSettingsView .settingsTabs span {
  min-height: 42px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 13px;
  letter-spacing: -0.01em;
  font-weight: 780;
  color: #315a67;
  background: rgba(255,255,255,.70);
  border: 1px solid var(--monet-quiet-line);
  box-shadow: 0 12px 28px rgba(21,48,68,.07), inset 0 1px 0 rgba(255,255,255,.82);
}
#adminView.monetSettingsView .pageCard {
  max-width: 1160px;
  margin-bottom: 16px;
  color: var(--monet-text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(246,252,248,.56)),
    radial-gradient(ellipse at 0 0, rgba(244,191,114,.16), transparent 36%);
  border: 1px solid var(--monet-quiet-line);
  border-radius: 28px;
  box-shadow: 0 22px 68px rgba(21,48,68,.11), inset 0 1px 0 rgba(255,255,255,.82);
}
#adminView.monetSettingsView .pageCard h2 {
  margin: 0 0 8px;
  padding-bottom: 9px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--monet-text);
  border-bottom: 1px solid rgba(81,121,135,.12);
}
#adminView.monetSettingsView .meta,
#adminView.monetSettingsView .field,
#adminView.monetSettingsView .summary,
#adminView.monetSettingsView .smallEmpty {
  color: var(--monet-muted);
}
#adminView.monetSettingsView .smallEmpty,
#adminView.monetSettingsView .note,
#adminView.monetSettingsView .tableRow,
#adminView.monetSettingsView .messagingHealthCard.status-green,
#adminView.monetSettingsView .messagingHealthCard.status-red,
#adminView.monetSettingsView .issueSummary,
#adminView.monetSettingsView .issueResolution {
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(81,121,135,.14);
  color: var(--monet-text);
}
#adminView.monetSettingsView .tableRow b,
#adminView.monetSettingsView .note b,
#adminView.monetSettingsView .issueResolution h3 {
  color: var(--monet-text);
}
#adminView.monetSettingsView .inputRow input,
#adminView.monetSettingsView .inputRow select,
#adminView.monetSettingsView input,
#adminView.monetSettingsView select {
  color: var(--monet-text);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(81,121,135,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
#adminView.monetSettingsView button,
#adminView.monetSettingsView button.secondary {
  background: linear-gradient(135deg, #315a67, #7caea8 88%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.30);
}

@media (max-width: 1440px) {
  .layout {
    grid-template-columns: minmax(295px, 320px) minmax(680px, 1fr);
  }
}

/* v15.13.3 TRUE REFERENCE MATCH PASS
   Target: match Documents(4).zip screenshots, not reinterpret them.
   Exterior-only. Protected core untouched. */
:root {
  --ref-ink: #071a64;
  --ref-muted: #41528f;
  --ref-purple: #4f25ff;
  --ref-purple-soft: #eee9ff;
  --ref-line: rgba(40, 53, 135, 0.13);
  --ref-card: rgba(255, 255, 255, 0.82);
  --ref-card-strong: rgba(255, 255, 255, 0.94);
  --ref-bg: #fbf9ff;
  --ref-shadow: rgba(58, 37, 164, 0.08);
}
html, body { min-width: 1220px; background: var(--ref-bg); overflow: hidden; }
body {
  color: var(--ref-ink);
  background:
    radial-gradient(circle at 7% 19%, rgba(235, 223, 255, .70), transparent 25%),
    radial-gradient(circle at 91% 4%, rgba(232, 226, 255, .70), transparent 24%),
    radial-gradient(circle at 75% 82%, rgba(236, 250, 247, .58), transparent 27%),
    linear-gradient(135deg, #fffdf8 0%, #fbf8ff 48%, #f8fcff 100%);
}
body::before, body::after { opacity: .10 !important; }
.app { display: flex; height: 100vh; overflow: hidden; background: transparent; }
.sidebar {
  width: 224px !important;
  min-width: 224px !important;
  padding: 22px 18px 18px !important;
  color: var(--ref-ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    radial-gradient(ellipse at 50% 72%, rgba(221, 211, 255, .72), transparent 22%),
    radial-gradient(ellipse at 48% 84%, rgba(191, 214, 255, .34), transparent 24%);
  border-right: 1px solid var(--ref-line);
  box-shadow: 20px 0 60px rgba(39, 29, 120, .055) !important;
  backdrop-filter: blur(18px) saturate(1.05);
  position: relative;
  overflow: hidden;
}
.sidebar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 90px;
  height: 270px;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(ellipse at 38% 80%, rgba(155, 128, 255, .28), transparent 18%),
    radial-gradient(ellipse at 56% 74%, rgba(164, 205, 238, .22), transparent 19%),
    linear-gradient(180deg, transparent, rgba(235, 229, 255, .48));
  filter: blur(.1px);
}
.brandBlock { position: relative; z-index: 1; margin: 2px 0 24px; text-align: center; }
.brand {
  margin: 0 !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px !important;
  font-weight: 500;
  color: #0a1968 !important;
  letter-spacing: -0.075em;
  text-shadow: none !important;
}
.brand::before, .brand::after { display: none !important; content: none !important; }
.brandTagline { margin-top: 6px; font-size: 11px; font-weight: 800; color: var(--ref-ink); }
.newConversationButton {
  position: relative; z-index: 1;
  width: 100%; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, #5a35ff, #4d19ea) !important;
  color: #fff; border: 0; box-shadow: 0 14px 32px rgba(79,37,255,.20) !important;
  font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px;
}
.newConversationButton span { font-size: 24px; line-height: 0; font-weight: 300; }
.primaryNav { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.nav {
  min-height: 48px !important; margin: 0 !important; padding: 0 12px !important; border-radius: 10px !important;
  display: grid !important; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center;
  background: transparent !important; color: var(--ref-ink) !important; box-shadow: none !important;
  font-size: 14px; font-weight: 820; text-align: left; transform: none !important;
}
.nav:hover, .nav.active, .nav.navActive {
  background: rgba(235, 229, 255, .82) !important;
  color: #4215f5 !important;
  box-shadow: none !important;
}
.navIcon { font-size: 18px; width: 24px; text-align: center; color: currentColor; opacity: .92; }
.nav b {
  min-width: 26px; padding: 5px 8px; border-radius: 999px; text-align: center;
  font-size: 13px; background: #ece7ff; color: #4f25ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.staffLabel, .staffPicker, .sync.hiddenUtility, .globalStatus.hiddenUtility { display: none !important; }
.staffMini {
  position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 24px; margin: 0 !important;
  border-radius: 14px !important; min-height: 62px; background: rgba(255,255,255,.88) !important;
  box-shadow: 0 18px 42px rgba(39,29,120,.12) !important; border: 1px solid var(--ref-line) !important;
}
.staffMini .staffAvatar { width: 42px; height: 42px; border-radius: 12px; }
.staffMini div b { display:block; color: var(--ref-ink); font-size: 13px; }
.staffMini div span { display:block; color: var(--ref-muted); font-size: 11px; margin-top: 3px; }
.staffMini i { margin-left: auto; font-style: normal; color: var(--ref-ink); font-size: 18px; }
.workspaceView {
  flex: 1; height: 100vh; overflow: hidden; padding: 16px 18px 76px 18px;
  display: grid; grid-template-rows: 54px 108px 1fr 58px; gap: 14px;
  background: transparent;
}
.monetTopBar {
  display: grid; grid-template-columns: minmax(420px, 620px) 186px 56px 210px; align-items: center; justify-content: space-between; gap: 18px;
}
.globalSearchShell {
  height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--ref-card-strong); border: 1px solid var(--ref-line); border-radius: 12px; box-shadow: 0 10px 34px var(--ref-shadow);
}
.globalSearchShell span { font-size: 25px; color: var(--ref-ink); }
.globalSearchShell input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ref-ink); }
.globalSearchShell kbd { border: 0; border-radius: 8px; background: #f2f0f9; color: var(--ref-ink); padding: 7px 10px; font-weight: 900; }
.quickActionButton {
  height: 50px; border: 0; border-radius: 10px; background: linear-gradient(135deg,#5633ff,#4e20e9) !important; color: #fff;
  font-weight: 900; box-shadow: 0 14px 34px rgba(79,37,255,.22) !important;
}
.topBell { position: relative; display:grid; place-items:center; height:48px; font-size: 28px; color: var(--ref-ink); }
.topBell b { position:absolute; right:5px; top:3px; display:grid; place-items:center; min-width:18px; height:18px; border-radius:50%; background:#4f25ff; color:#fff; font-size:11px; }
.topStaff { display:flex; align-items:center; justify-content:flex-end; gap:12px; color:var(--ref-ink); font-weight:900; }
.topStaff .staffAvatar { width:48px; height:48px; border-radius:50%; }
.topStaff span, .topStaff small { display:block; color:var(--ref-muted); font-size:12px; font-weight:800; margin-top:2px; }
.monetSignalCards { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
.monetSignalCard {
  height: 100%; min-height: 98px; border: 1px solid var(--ref-line); border-radius: 14px; padding: 16px 18px;
  background: rgba(255,255,255,.84) !important; color: var(--ref-ink); box-shadow: 0 12px 34px var(--ref-shadow) !important;
  display: grid; grid-template-columns: 58px 1fr auto; grid-template-rows: 1fr auto; align-items: center; column-gap: 14px; text-align:left;
}
.monetSignalCard .signalIcon { grid-row:1 / 3; width:58px; height:58px; border-radius:50%; background: #eee9ff; position: relative; }
.monetSignalCard b { font-size:32px; color:#4f25ff; line-height:1; }
.monetSignalCard strong { display:block; font-size:14px; color:var(--ref-ink); margin-top:5px; }
.monetSignalCard em { grid-column:2; color:#4f25ff; font-style:normal; font-size:12px; font-weight:900; }
.conversationWorkspaceGrid.layout {
  padding: 0 !important; gap: 10px !important; height: 100% !important;
  display:grid !important; grid-template-columns: minmax(360px, 40%) minmax(520px, 1fr) minmax(260px, 300px) !important;
  overflow: hidden;
}
.listPane, .chatPane, .profilePane, .pageCard, .pageHeader, .summaryCard, .tableRow, .chatCard, .note {
  border: 1px solid var(--ref-line) !important; background: rgba(255,255,255,.82) !important; box-shadow: 0 12px 34px var(--ref-shadow) !important; backdrop-filter: blur(10px) saturate(1.02) !important;
}
.listPane, .chatPane, .profilePane { border-radius: 14px !important; min-height: 0 !important; overflow: hidden; }
.paneHeader, .chatHeader {
  min-height: 66px !important; padding: 16px 20px !important; border-bottom: 1px solid var(--ref-line) !important; background: rgba(255,255,255,.62) !important;
}
.paneHeader h1, .chatHeader b, .pageHeader h1 { color: var(--ref-ink) !important; font-size: 22px !important; letter-spacing: -0.04em !important; }
.paneHeader button { height: 40px; border-radius: 9px; background: #4f25ff !important; color:#fff; box-shadow:none !important; }
.summary { padding: 16px 20px !important; font-size: 13px !important; color: var(--ref-muted) !important; border-bottom: 1px solid var(--ref-line); }
.queueDropdownHost { padding: 14px 20px !important; grid-template-columns: 1fr !important; border-bottom: 1px solid var(--ref-line); }
.filterDropdownLabel, .filterHint { display:none !important; }
.filterDropdown {
  height: 42px; border-radius: 10px !important; padding: 0 14px !important; background:#fff !important; border:1px solid var(--ref-line) !important; color:var(--ref-ink) !important;
}
#inbox { max-height: calc(100vh - 396px) !important; padding: 0 12px 18px; }
.chatCard {
  margin: 12px 0 !important; padding: 16px 18px !important; border-radius: 14px !important; display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start;
  background: rgba(255,255,255,.86) !important; box-shadow: none !important;
}
.chatCard.active { border-color: rgba(79,37,255,.52) !important; box-shadow: 0 0 0 1px rgba(79,37,255,.22), 0 15px 34px rgba(79,37,255,.08) !important; transform:none !important; }
.clientInitials { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#ffe6e6; color:#d42727; font-weight:950; }
.chatTitle { display:flex !important; justify-content:space-between; align-items:flex-start !important; gap:10px; font-size:14px; }
.chatTitle > span:first-child { font-weight:900; color:var(--ref-ink); }
.chatTime { max-width:96px; font-size:11.5px !important; color:var(--ref-ink) !important; opacity:.82; }
.chatPreview { font-size:13px !important; color:var(--ref-ink) !important; white-space:normal !important; max-height:40px; }
.chatMetaLine { font-size:11.5px !important; color:var(--ref-muted) !important; }
.badge, .ownershipBadge, .statusText { border-radius: 999px !important; font-weight:900; box-shadow:none !important; }
.chatPane { border-radius:14px !important; }
.messages {
  padding: 28px 30px !important; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.30)) !important;
}
.msg { border-radius: 12px !important; box-shadow: none !important; font-size: 14px !important; max-width: 64% !important; }
.msg.inbound { background: #fff1f1 !important; border:1px solid rgba(238,177,177,.45) !important; }
.msg.outbound { background: #f2edff !important; border:1px solid rgba(172,153,255,.42) !important; }
.replyBox { padding: 14px 18px !important; background: rgba(255,255,255,.62) !important; border-top:1px solid var(--ref-line) !important; }
.composerDropZone { border-radius:12px !important; background:#fff !important; }
.replyBox button, button { border-radius: 10px; }
.profilePane { display:block; }
.profileBlock { padding: 18px !important; }
.profileBlock h2 { color:var(--ref-ink); }
.systemControlDock {
  position: fixed; left: 242px; right: 14px; bottom: 12px; height: 48px; z-index: 6;
  display:grid; grid-template-columns: repeat(5, 1fr); gap:0; overflow:hidden; border-radius:12px;
  background:rgba(255,255,255,.88); border:1px solid var(--ref-line); box-shadow: 0 12px 34px rgba(58,37,164,.08);
}
.systemControlDock div { display:grid; grid-template-columns:36px 1fr; align-items:center; padding:0 14px; border-right:1px solid var(--ref-line); color:var(--ref-ink); }
.systemControlDock div:last-child { border-right:0; }
.systemControlDock span { grid-row:1 / 3; color:#4f25ff; font-size:22px; }
.systemControlDock b { font-size:12px; }
.systemControlDock small { display:block; font-size:11px; color:#16a34a; font-weight:900; }
.pageView.monetReferencePage, #adminView.monetSettingsView {
  flex: 1; height:100vh; overflow:auto; padding:16px 18px 76px !important; background:
    radial-gradient(circle at 8% 12%, rgba(235,223,255,.52), transparent 25%),
    radial-gradient(circle at 86% 8%, rgba(231,224,255,.62), transparent 26%),
    linear-gradient(135deg,#fffdf8,#fbf8ff 48%,#f8fcff) !important;
}
.pageTopBar { margin-bottom: 16px; }
.pageHeader {
  min-height: auto !important; padding: 0 !important; margin-bottom: 18px !important; display:block !important; background: transparent !important; border:0 !important; box-shadow:none !important;
}
.pageHeader h1 { font-size:22px !important; margin:0 0 8px !important; }
.pageHeader p { color:var(--ref-muted) !important; margin:0 !important; }
.pageHeader > button { display:none !important; }
#adminView.monetSettingsView .settingsTabs { gap: 22px !important; margin: 20px 0 18px !important; border-bottom:1px solid var(--ref-line); }
#adminView.monetSettingsView .settingsTabs span { background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding: 0 0 14px !important; color:var(--ref-ink) !important; }
#adminView.monetSettingsView .settingsTabs span:first-child { color:#4f25ff !important; border-bottom:2px solid #4f25ff !important; }
#adminView.monetSettingsView .pageCard, .pageCard {
  border-radius:14px !important; margin-bottom:14px !important; max-width:none !important; background:rgba(255,255,255,.86) !important;
}
.splitPage { grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr) !important; }
.tableRow { border-radius:12px !important; box-shadow:none !important; }
@media (max-width: 1440px) {
  .monetTopBar { grid-template-columns: minmax(340px, 1fr) 166px 48px 190px; }
  .monetSignalCards { grid-template-columns: repeat(4, minmax(120px,1fr)); }
  .conversationWorkspaceGrid.layout { grid-template-columns: minmax(320px, 390px) minmax(520px, 1fr) !important; }
  .profilePane { display:none !important; }
}

/* v15.13.4 - real reference match pass: Documents.zip is the UI source of truth. */
:root{
  --snappy-purple:#5b21ff;
  --snappy-purple-2:#7a4dff;
  --snappy-ink:#080a44;
  --snappy-ink-soft:#33406f;
  --snappy-muted:#6d7297;
  --snappy-line:#e6e3f7;
  --snappy-panel:rgba(255,255,255,.88);
  --snappy-panel-strong:rgba(255,255,255,.96);
  --snappy-lavender:#f2edff;
  --snappy-lavender-2:#ede6ff;
  --snappy-shadow:0 18px 60px rgba(32,22,90,.08);
  --snappy-shadow-soft:0 8px 26px rgba(32,22,90,.055);
}
html,body{min-height:100%;}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--snappy-ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(235,225,255,.85), transparent 25%),
    radial-gradient(circle at 88% 10%, rgba(246,239,255,.85), transparent 28%),
    linear-gradient(180deg,#fff 0%,#fbf9ff 52%,#f7f4ff 100%);
}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:0;}
body::before{inset:0;background:linear-gradient(90deg,rgba(245,240,255,.35),transparent 28%,transparent 72%,rgba(245,240,255,.32));opacity:.7;mix-blend-mode:multiply;}
body::after{inset:auto auto 0 0;width:300px;height:330px;background:url('/assets/monet-underwater-wallpaper.png') left bottom/720px auto no-repeat;opacity:.28;filter:saturate(.8) hue-rotate(18deg) brightness(1.22);}
.app{position:relative;z-index:1;display:flex;min-height:100vh;background:transparent;}
.sidebar{width:288px!important;min-width:288px!important;padding:24px 18px!important;border-right:1px solid var(--snappy-line)!important;background:rgba(255,255,255,.74)!important;backdrop-filter:blur(18px) saturate(1.08)!important;box-shadow:none!important;position:relative;overflow:hidden;}
.sidebar::before{content:"";position:absolute;left:-20px;right:-20px;bottom:0;height:360px;background:url('/assets/monet-underwater-wallpaper.png') left bottom/780px auto no-repeat;opacity:.24;filter:saturate(.7) hue-rotate(20deg) brightness(1.3);z-index:0;}
.sidebar>*{position:relative;z-index:1;}
.brandBlock{padding:0 16px 22px;}
.brand{font-family:Georgia,serif!important;font-style:italic;font-weight:500!important;font-size:42px!important;line-height:1!important;margin:0 0 8px!important;color:#120c56!important;letter-spacing:-.055em;text-shadow:none!important;}
.brandTagline{font-size:12px;color:#101660;font-weight:700;margin-left:18px;}
.newConversationButton{width:100%;height:52px;border-radius:12px!important;background:linear-gradient(135deg,var(--snappy-purple),#6f2cff)!important;color:white!important;font-size:15px!important;box-shadow:0 12px 24px rgba(91,33,255,.22)!important;margin:0 0 22px!important;display:flex;align-items:center;justify-content:center;gap:10px;}
.newConversationButton span{font-size:24px;font-weight:300;}
.primaryNav{display:flex;flex-direction:column;gap:10px;}
.nav,.navItem{height:50px!important;border-radius:12px!important;background:transparent!important;color:#11155f!important;font-weight:700!important;font-size:15px!important;padding:0 14px!important;margin:0!important;display:grid!important;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;border:1px solid transparent!important;}
.navIcon{font-size:20px;color:#0c155f;opacity:.92;}
.nav b{min-width:30px;height:26px;border-radius:999px;background:#efe8ff;color:var(--snappy-purple);display:grid;place-items:center;font-size:13px;}
.nav.active,.nav:hover,.navActive{background:linear-gradient(90deg,rgba(111,44,255,.12),rgba(245,240,255,.85))!important;border-color:rgba(91,33,255,.10)!important;color:#5b21ff!important;box-shadow:none!important;}
.staffLabel,.staffPicker,.hiddenUtility,#staffStatusPanel>.staffMini:not(.staffMiniButton){display:none!important;}
.staffMiniButton{position:absolute!important;left:18px;right:18px;bottom:24px;margin:0!important;height:66px;padding:10px 12px!important;border-radius:14px!important;background:rgba(255,255,255,.90)!important;border:1px solid var(--snappy-line)!important;box-shadow:var(--snappy-shadow-soft)!important;color:#14165d!important;}
.staffMiniButton i{margin-left:auto;color:#12155c;font-style:normal;font-size:24px;}
.staffMini b{font-size:15px;color:#11155f;}
.staffMini span{font-size:13px;color:#4d5c83;}
.staffAvatar{width:42px!important;height:42px!important;border-radius:50%!important;background:linear-gradient(135deg,#ffe2c6,#dfeeff)!important;font-size:22px!important;}
.workspaceView,.pageView{flex:1;padding:24px 18px 84px 28px!important;height:100vh;overflow:auto;background:transparent!important;}
.monetTopBar,.pageTopBar{height:64px;margin:0 0 18px;display:grid!important;grid-template-columns:minmax(440px,650px) 1fr auto auto;gap:18px;align-items:center;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
.globalSearchShell{height:56px;border-radius:14px;background:rgba(255,255,255,.86);border:1px solid var(--snappy-line);box-shadow:var(--snappy-shadow-soft);display:flex;align-items:center;gap:14px;padding:0 18px;color:#0d115b;}
.globalSearchShell span{font-size:25px;line-height:1;}
.globalSearchShell input{border:0;background:transparent;outline:0;flex:1;font-size:15px;color:var(--snappy-ink);}
.globalSearchShell kbd{border:0;background:#f5f2ff;color:#0d115b;border-radius:9px;padding:8px 12px;font-weight:800;font-size:13px;}
.quickActionButton{height:56px;min-width:190px;border-radius:14px!important;background:linear-gradient(135deg,var(--snappy-purple),#6a28ff)!important;color:#fff!important;box-shadow:0 14px 28px rgba(91,33,255,.20)!important;font-size:15px!important;}
.topBell{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#11155f;font-size:27px;position:relative;}
.topBell b{position:absolute;right:3px;top:2px;width:19px;height:19px;border-radius:50%;background:var(--snappy-purple);color:#fff;font-size:11px;display:grid;place-items:center;}
.topStaff{display:flex;align-items:center;gap:12px;color:#11155f;font-weight:800;min-width:210px;}
.topStaff span,.topStaff small{display:block;color:#4e5b82;font-weight:600;font-size:13px;}
.monetSignalCards{display:grid!important;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px;margin:0 0 16px;}
.monetSignalCard{min-height:112px;border-radius:16px!important;border:1px solid var(--snappy-line)!important;background:rgba(255,255,255,.88)!important;color:#11155f!important;box-shadow:var(--snappy-shadow-soft)!important;text-align:left;padding:18px!important;display:grid;grid-template-columns:62px 1fr auto;grid-template-rows:auto auto;gap:4px 12px;align-items:center;}
.monetSignalCard .signalIcon{grid-row:1 / 3;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#efe6ff,#ffffff);border:8px solid #f1ebff;}
.monetSignalCard b{font-size:34px;color:var(--snappy-purple);line-height:1;}
.monetSignalCard strong{font-size:15px;}
.monetSignalCard em{grid-column:2 / 4;font-style:normal;color:var(--snappy-purple);font-size:13px;font-weight:800;}
.conversationWorkspaceGrid,.layout{display:grid!important;grid-template-columns:minmax(520px,590px) minmax(560px,1fr) minmax(295px,330px)!important;gap:14px!important;padding:0!important;}
.listPane,.chatPane,.profilePane,.pageHeader,.pageCard,.summaryCard,.chatCard,.tableRow,.note{background:rgba(255,255,255,.88)!important;border:1px solid var(--snappy-line)!important;border-radius:16px!important;box-shadow:var(--snappy-shadow-soft)!important;backdrop-filter:blur(12px) saturate(1.06)!important;color:var(--snappy-ink)!important;}
.listPane,.chatPane,.profilePane{min-height:calc(100vh - 260px)!important;max-height:calc(100vh - 260px);overflow:hidden;}
.paneHeader{padding:22px 22px 14px!important;border-bottom:0!important;display:flex;align-items:center;gap:14px;}
.paneHeader h1,.pageHeader h1{font-size:24px!important;color:#11155f!important;letter-spacing:-.04em!important;font-weight:900!important;}
.paneHeader button,.pageHeader button{background:#fff!important;color:#11155f!important;border:1px solid var(--snappy-line)!important;border-radius:10px!important;box-shadow:var(--snappy-shadow-soft)!important;}
.summary{padding:0 22px 14px!important;border-bottom:0!important;color:#6e7395!important;font-size:14px!important;}
.queueDropdownHost{padding:0 22px 14px!important;border-bottom:0!important;display:flex!important;align-items:center;gap:10px!important;}
.filterDropdownLabel{display:none!important;}
.filterDropdown{height:40px;border:1px solid var(--snappy-line);border-radius:10px;background:#fff;color:#11155f;font-weight:800;padding:0 40px 0 14px;}
.filterHint{font-size:13px;color:#767b9d;}
#inbox{max-height:calc(100vh - 430px)!important;padding:0 14px 16px;}
.chatCard{margin:0 0 12px!important;min-height:124px;border-radius:14px!important;padding:18px 16px!important;display:grid;grid-template-columns:52px 1fr;gap:14px;box-shadow:none!important;border-color:#eeeafb!important;background:#fff!important;}
.chatCard.active{border:2px solid #855fff!important;background:linear-gradient(135deg,#fff,#fbf8ff)!important;box-shadow:0 14px 34px rgba(91,33,255,.11)!important;}
.clientInitials{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#ffdcd9;color:#bb2430;font-weight:900;font-size:18px;align-self:start;}
.chatCardMain{min-width:0;}
.chatTitle{align-items:start;color:#11155f!important;font-weight:900!important;font-size:15px;}
.chatTime{font-size:13px;color:#10165d;font-weight:800;white-space:nowrap;text-align:right;max-width:90px;}
.chatPreview{margin-top:7px;color:#17205f;line-height:1.45;font-size:14px;}
.chatMetaLine{margin-top:8px;display:flex;align-items:center;gap:10px;justify-content:space-between;color:#4d5c83;font-size:13px;}
.badge,.ownershipBadge,.statusText{border-radius:999px!important;padding:6px 10px!important;font-size:12px!important;font-weight:900!important;border:0!important;}
.badge.unassigned,.ownershipBadge.unassigned{background:#fff1d9!important;color:#8a4b00!important;}
.badge.needsReply{background:#e5efff!important;color:#1759ff!important;}
.badge.deliveryIssue,.status-failed,.status-send_failed{background:#ffe9e9!important;color:#c92525!important;}
.status-received{background:#dff7e8!important;color:#008144!important;}
.chatPane{display:flex!important;flex-direction:column!important;background:rgba(255,255,255,.9)!important;border-radius:16px!important;position:relative;}
.chatPane::before,.chatPane::after{display:none!important;}
.chatHeader{min-height:112px!important;padding:20px 24px!important;border-bottom:1px solid var(--snappy-line)!important;background:#fff!important;display:flex!important;align-items:start!important;}
.chatHeader b{font-size:22px!important;color:#11155f!important;letter-spacing:-.035em;}
.chatHeader .meta{font-size:13px;color:#6e7395!important;margin-top:8px;}
.smallActions{margin:0!important;gap:10px!important;}
.smallActions .secondary,.secondary{height:40px;border-radius:12px!important;background:#fff!important;color:#5a4579!important;border:1px solid var(--snappy-line)!important;box-shadow:var(--snappy-shadow-soft)!important;}
.messages{flex:1!important;height:auto!important;min-height:0!important;padding:28px 30px!important;gap:16px!important;background:linear-gradient(180deg,#fff,#fefcff)!important;}
.msg{max-width:min(500px,72%)!important;border-radius:14px!important;padding:14px 16px!important;border:1px solid var(--snappy-line)!important;box-shadow:var(--snappy-shadow-soft)!important;font-size:15px!important;line-height:1.45!important;}
.msg.inbound{background:#fff1f1!important;align-self:flex-start!important;}
.msg.outbound{background:#f2edff!important;align-self:flex-end!important;}
.msgMeta{font-size:12px!important;color:#737898!important;margin-top:8px!important;}
.replyBox{border-top:1px solid var(--snappy-line)!important;background:#fff!important;padding:16px!important;align-items:end;}
.composerDropZone{flex:1;border:1px dashed #c4b5ff!important;border-radius:14px!important;background:#fbf8ff!important;padding:10px!important;}
.replyBox textarea,.composerDropZone textarea{width:100%;border:0!important;background:transparent!important;outline:0!important;min-height:60px!important;color:#11155f!important;}
#sendReplyButton{width:50px;height:50px;border-radius:12px!important;background:linear-gradient(135deg,var(--snappy-purple),#6f2cff)!important;color:#fff!important;font-size:0;position:relative;}
#sendReplyButton::before{content:'➤';font-size:20px;}
.profilePane{padding:0!important;background:#fff!important;overflow:auto;}
.profileBlock{padding:20px!important;border-bottom:1px solid var(--snappy-line)!important;}
.profileBlock h2{color:#11155f!important;font-size:16px!important;margin:0 0 14px!important;}
.field,.meta{color:#67708f!important;}
.pageView{padding:24px 24px 86px 30px!important;}
.pageHeader{padding:28px 32px!important;margin:0 0 18px!important;background:rgba(255,255,255,.84)!important;}
.pageHeader p{color:#4d5b83!important;font-size:15px!important;}
.monetSettingsTabs,.settingsTabs{display:flex!important;gap:10px!important;margin:0 0 20px!important;flex-wrap:wrap!important;}
.monetSettingsTabs span,.settingsTabs span{height:40px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid var(--snappy-line);display:flex;align-items:center;color:#11155f;font-weight:800;}
.settingsReferenceGrid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;margin:0 0 18px;}
.settingsReferenceCard{position:relative;min-height:250px;border:1px solid var(--snappy-line);border-radius:14px;background:rgba(255,255,255,.9);box-shadow:var(--snappy-shadow-soft);padding:20px;color:#11155f;overflow:hidden;}
.settingsReferenceCard::after{content:"";position:absolute;right:-30px;top:-30px;width:180px;height:120px;background:url('/assets/monet-underwater-wallpaper.png') right top/420px auto no-repeat;opacity:.12;filter:hue-rotate(20deg) saturate(.8);}
.sectionNumber{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eee7ff;color:#5b21ff;font-weight:900;margin-bottom:12px;}
.settingsReferenceCard h2{font-size:16px;color:#5b21ff;margin:0 0 4px;}
.settingsReferenceCard p{font-size:12px;color:#4d5b83;margin:0 0 16px;}
.miniSettingsRow{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #f0edfb;padding:10px 0;font-size:12px;}
.miniSettingsRow b{font-weight:800;}.miniSettingsRow em{font-style:normal;color:#4d5b83;text-align:right;}
.miniPrimary,.miniSecondary{margin-top:14px;height:34px!important;border-radius:8px!important;font-size:12px!important;padding:0 14px!important;background:var(--snappy-purple)!important;color:#fff!important;float:right;}
.miniSecondary{background:#fff!important;color:#5b21ff!important;border:1px solid #d9d0ff!important;}
#messagingHealthCard,#issueResolutionCard{background:rgba(255,255,255,.86)!important;}
.messagingHealthCard,.issueSummary,.issueResolution{border:1px solid var(--snappy-line)!important;border-radius:14px!important;background:#fff!important;color:#11155f!important;padding:16px!important;margin:10px 0!important;}
.tableList{gap:0!important;background:#fff;border:1px solid var(--snappy-line);border-radius:14px;overflow:hidden;}
.tableRow{border:0!important;border-bottom:1px solid #eeeafb!important;border-radius:0!important;box-shadow:none!important;padding:16px 18px!important;}
.tableRow:last-child{border-bottom:0!important;}
.systemControlDock{position:fixed!important;left:288px!important;right:0!important;bottom:0!important;height:64px;background:rgba(255,255,255,.92)!important;border-top:1px solid var(--snappy-line)!important;box-shadow:0 -8px 36px rgba(32,22,90,.06)!important;display:grid!important;grid-template-columns:repeat(6,1fr)!important;z-index:10;backdrop-filter:blur(16px);}
.systemControlDock div{display:flex;align-items:center;gap:12px;padding:0 22px;border-right:1px solid var(--snappy-line);color:#11155f;}
.systemControlDock span{font-size:22px;color:#5b21ff;}.systemControlDock b{font-size:13px;}.systemControlDock small{font-size:12px;color:#139a33;font-weight:800;display:block;}
@media(max-width:1350px){.conversationWorkspaceGrid,.layout{grid-template-columns:minmax(410px,500px) minmax(520px,1fr)!important}.profilePane{display:none!important}.settingsReferenceGrid{grid-template-columns:repeat(2,minmax(220px,1fr));}}
@media(max-width:1050px){.sidebar{width:220px!important;min-width:220px!important}.workspaceView,.pageView{padding-left:18px!important}.monetSignalCards{grid-template-columns:repeat(2,1fr)}.conversationWorkspaceGrid,.layout{grid-template-columns:1fr!important}.listPane,.chatPane{max-height:none!important}.systemControlDock{left:220px!important;grid-template-columns:repeat(2,1fr);height:auto}.profilePane{display:none!important}}

/* SnapPy v15.13.5 MONET REFERENCE EXECUTION PASS
   Reference target: Documents(5).zip. This is not a new theme; it is a closer match to the provided screenshots.
   UI-only changes. Protected core remains untouched. */
:root {
  --ref-ink: #15143d;
  --ref-ink-soft: #5f6682;
  --ref-purple: #5b19f2;
  --ref-purple-2: #7b43ff;
  --ref-lavender: #f2edff;
  --ref-lavender-2: #faf8ff;
  --ref-line: rgba(68, 61, 120, .13);
  --ref-card: rgba(255, 255, 255, .82);
  --ref-card-strong: rgba(255, 255, 255, .94);
  --ref-shadow: 0 18px 55px rgba(52, 42, 105, .10);
  --ref-shadow-soft: 0 8px 24px rgba(52, 42, 105, .06);
}

body {
  color: var(--ref-ink);
  background:
    radial-gradient(circle at 4% 78%, rgba(190, 168, 255, .22), transparent 22%),
    radial-gradient(circle at 92% 8%, rgba(222, 211, 255, .34), transparent 28%),
    radial-gradient(circle at 68% 96%, rgba(255, 232, 238, .30), transparent 22%),
    linear-gradient(135deg, #ffffff 0%, #fbf9ff 45%, #f8fbff 100%) !important;
}
body::before {
  opacity: .22 !important;
  background:
    radial-gradient(ellipse at 8% 72%, rgba(145, 102, 255, .20), transparent 23%),
    repeating-linear-gradient(102deg, rgba(91, 25, 242, .045) 0 1px, transparent 1px 16px) !important;
  mix-blend-mode: normal !important;
}
body::after { opacity: .10 !important; background: none !important; animation: none !important; }

.app { gap: 0; background: transparent !important; }
.sidebar {
  width: 238px !important;
  min-width: 238px !important;
  padding: 24px 16px !important;
  border-right: 1px solid var(--ref-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,247,255,.86)),
    radial-gradient(circle at 14% 78%, rgba(181, 156, 255, .28), transparent 24%) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.7) !important;
  border-radius: 0 !important;
}
.brandBlock { margin: 0 0 20px; padding: 0 6px 12px; }
.brand { font-size: 40px !important; line-height: 1; color: #17133d !important; letter-spacing: -.07em; text-shadow: none !important; }
.brand::before { display:none !important; }
.brandTagline { margin-top: 10px; color: #17133d; font-weight: 800; font-size: 12px; }
.newConversationButton {
  height: 44px; width: 100%; border-radius: 12px !important;
  background: linear-gradient(135deg, var(--ref-purple), #6216f3) !important;
  color:#fff !important; box-shadow: 0 12px 28px rgba(91,25,242,.22) !important;
  justify-content: center; margin: 10px 0 28px; font-weight: 800;
}
body:not([data-active-view="inbox"]) .newConversationButton { display:none !important; }
.primaryNav { gap: 12px !important; }
.nav {
  min-height: 46px; border-radius: 12px !important; padding: 0 12px !important;
  color: #18163f !important; background: transparent !important; border: 1px solid transparent !important;
  box-shadow: none !important; font-weight: 800;
}
.nav .navIcon { color:#17133d; opacity: .9; width: 22px; }
.nav b { margin-left:auto; min-width:28px; height:26px; padding:0 8px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#eee8ff; color:var(--ref-purple); }
.nav.navActive, .nav.active, .nav:hover {
  background: #f0eaff !important; color: var(--ref-purple) !important; border-color: transparent !important; box-shadow: none !important;
}
.staffLabel, .staffPicker, .hiddenUtility { display:none !important; }
.staffMini { margin-top:auto !important; border-radius: 14px !important; background: rgba(255,255,255,.88) !important; box-shadow: var(--ref-shadow-soft) !important; }
.staffAvatar { background: linear-gradient(135deg, #ffe2c6, #e9e1ff) !important; color:#17133d !important; }

.workspaceView, .pageView { padding: 18px 18px 68px !important; }
.monetTopBar {
  height: 54px; margin: 0 0 22px !important; padding:0 !important;
  background: transparent !important; border:0 !important; box-shadow:none !important; display:flex; gap:18px; align-items:center;
}
.globalSearchShell {
  height: 54px; max-width: 600px; border-radius: 14px !important; background: rgba(255,255,255,.94) !important;
  border: 1px solid var(--ref-line) !important; box-shadow: var(--ref-shadow-soft) !important;
}
.globalSearchShell input { color: var(--ref-ink); font-weight: 650; }
.globalSearchShell kbd { background:#f1edff; color:#17133d; border:0; }
.quickActionButton {
  height: 54px; min-width: 184px; border-radius: 14px !important;
  background: linear-gradient(135deg, var(--ref-purple), #6618ff) !important; color:#fff !important;
  box-shadow: 0 14px 34px rgba(91,25,242,.24) !important;
}
body:not([data-active-view="inbox"]) .quickActionButton { display:none !important; }
.topBell { color:#17133d; background: transparent !important; box-shadow:none !important; }
.topBell b { background: var(--ref-purple) !important; color:#fff; }
.topStaff { min-width: 190px; background: transparent !important; box-shadow:none !important; border:0 !important; }

.monetSignalCards { display:grid !important; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:12px; margin: 0 0 16px !important; }
.monetSignalCard {
  min-height: 92px; border-radius:16px !important; background: var(--ref-card-strong) !important; border:1px solid var(--ref-line) !important;
  box-shadow: var(--ref-shadow-soft) !important; color: var(--ref-ink) !important; padding:16px !important;
}
.monetSignalCard b { color: var(--ref-purple) !important; font-size: 28px !important; }
.monetSignalCard strong { font-size:14px !important; }
.monetSignalCard em { color: var(--ref-purple) !important; font-weight:800; }
.monetSignalCard .signalIcon { background:#efe8ff !important; }

.layout.conversationWorkspaceGrid {
  grid-template-columns: minmax(360px, 430px) minmax(600px, 1fr) minmax(280px, 340px) !important;
  gap: 12px !important; padding: 0 !important; height: calc(100vh - 180px) !important; min-height: 650px !important;
}
.listPane, .chatPane, .profilePane, .pageCard, .pageHeader, .summaryCard, .chatCard, .tableRow, .note {
  background: var(--ref-card) !important; border: 1px solid var(--ref-line) !important;
  box-shadow: var(--ref-shadow) !important; backdrop-filter: blur(18px) saturate(1.08) !important;
}
.listPane, .chatPane, .profilePane { border-radius: 18px !important; min-height: unset !important; overflow:hidden; }
.paneHeader, .chatHeader { background: rgba(255,255,255,.58) !important; border-bottom:1px solid var(--ref-line) !important; padding: 20px 22px !important; min-height: 74px !important; }
.paneHeader h1, .pageHeader h1 { font-size: 22px !important; color:var(--ref-ink) !important; letter-spacing:-.03em; }
.paneHeader button, .pageHeader button { background: #f3edff !important; color: var(--ref-purple) !important; box-shadow:none !important; border:0 !important; }
.summary { color: var(--ref-ink-soft) !important; padding: 0 22px 12px !important; }
.queueDropdownHost { padding: 0 22px 14px !important; }
.filterDropdown { height: 42px; border-radius: 12px !important; background:rgba(255,255,255,.88) !important; border:1px solid var(--ref-line) !important; color: var(--ref-ink); font-weight:800; }
.filterDropdownLabel, .filterHint { display:none !important; }
#inbox { max-height: calc(100% - 148px) !important; padding: 0 14px 16px; }
.chatCard { min-height: 108px; margin: 0 0 10px !important; padding: 16px !important; border-radius: 14px !important; background: rgba(255,255,255,.74) !important; box-shadow: none !important; display:grid; grid-template-columns: 46px 1fr; gap:12px; }
.chatCard:hover, .chatCard.active { transform:none !important; border-color: rgba(91,25,242,.48) !important; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,244,255,.90)) !important; box-shadow: 0 10px 30px rgba(91,25,242,.10) !important; }
.clientInitials { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#ffe2df; color:#d42d42; font-weight:900; }
.chatTitle { font-size: 15px !important; letter-spacing:0 !important; color:#17133d !important; }
.chatTime { color:#1d2451 !important; font-size:12px; font-weight:800; }
.chatPreview { margin-top:7px; color:#32345f !important; line-height:1.42; }
.chatMetaLine { margin-top:10px; color: var(--ref-ink-soft); }
.badge { border:0 !important; box-shadow:none !important; background:#f0eaff !important; color: var(--ref-purple) !important; }
.badge.unassigned { background:#fff2d8 !important; color:#9b5b00 !important; }
.badge.needsReply { background:#e9fff0 !important; color:#078440 !important; }

.chatPane { background: rgba(255,255,255,.70) !important; border-radius:18px !important; box-shadow: var(--ref-shadow) !important; }
.chatPane::before, .chatPane::after { display:none !important; }
.chatHeader { min-height: 88px !important; }
.chatHeader b { font-size:22px !important; color:var(--ref-ink) !important; }
.chatHeader .meta { color: var(--ref-ink-soft) !important; }
.smallActions button { background:#fff !important; color:#4d3d69 !important; border:1px solid var(--ref-line) !important; box-shadow:var(--ref-shadow-soft) !important; }
.messages { padding: 28px !important; gap:16px !important; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(250,248,255,.50)) !important; }
.messages:empty::before { display:none !important; }
.messages:empty::after { content:"Select a conversation to begin." !important; background:#fff !important; color:var(--ref-ink-soft) !important; box-shadow:var(--ref-shadow-soft) !important; }
.msg { border-radius:14px !important; max-width: 68% !important; padding:14px 16px !important; box-shadow:var(--ref-shadow-soft) !important; backdrop-filter:none !important; border:1px solid var(--ref-line) !important; }
.msg.inbound { background:#fff4f4 !important; }
.msg.outbound { background:#f0ebff !important; }
.msgBody { color:#191747 !important; }
.msgMeta { color:#59627e !important; }
.replyBox { background:rgba(255,255,255,.72) !important; border-top:1px solid var(--ref-line) !important; padding:16px 18px !important; }
.composerDropZone { background:rgba(255,255,255,.78) !important; border:1px dashed rgba(91,25,242,.24) !important; box-shadow:none !important; }
.replyBox button#sendReplyButton { width:52px; height:52px; border-radius:14px !important; background:var(--ref-purple) !important; color:#fff !important; }

.profilePane { background: rgba(255,255,255,.74) !important; }
.profileBlock { background:#fff !important; border:1px solid var(--ref-line); border-radius:14px; padding:16px; margin:14px; box-shadow:var(--ref-shadow-soft); }
.profileBlock h2 { color:#17133d; }
.field, .meta, .composerHint, .pageHeader p { color: var(--ref-ink-soft) !important; }

.systemControlDock { background: rgba(255,255,255,.86) !important; border:1px solid var(--ref-line) !important; box-shadow: var(--ref-shadow-soft) !important; color:#17133d !important; }
.systemControlDock div { border-color: var(--ref-line) !important; }
.systemControlDock span { color: var(--ref-purple) !important; }
.systemControlDock small { color: var(--ref-purple) !important; }

.pageHeader { border-radius:18px !important; min-height: 92px; margin-bottom:18px !important; }
.pageView { background: transparent !important; }
.pageCard { border-radius:18px !important; }
.settingsTabs, .monetSettingsTabs { gap:10px !important; margin:0 0 18px !important; }
.settingsTabs span, .monetSettingsTabs span { background:#fff !important; border:1px solid var(--ref-line) !important; border-radius:999px !important; color:#22324a !important; box-shadow:var(--ref-shadow-soft) !important; }
.settingsTabs span:first-child, .monetSettingsTabs span:first-child { background:#efe8ff !important; color: var(--ref-purple) !important; }
.settingsReferenceGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap:14px !important; }
.settingsReferenceCard { background: rgba(255,255,255,.88) !important; border:1px solid var(--ref-line) !important; box-shadow:var(--ref-shadow-soft) !important; border-radius:16px !important; }

@media (max-width: 1500px) {
  .layout.conversationWorkspaceGrid { grid-template-columns: minmax(330px, 400px) minmax(560px, 1fr) !important; }
  .profilePane { display:none !important; }
}


/* v15.13.7 official SnapPy logo + operator work-sort clarity */
.brandBlockWithLogo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left !important;
}
.brandLogo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 18px;
  filter: drop-shadow(0 10px 20px rgba(58, 45, 111, 0.14));
}
.brandTextGroup { min-width: 0; }
.brandBlockWithLogo .brand {
  margin-bottom: 0 !important;
  font-size: 34px !important;
}
.brandBlockWithLogo .brandTagline {
  margin-left: 2px !important;
  margin-top: 5px !important;
  white-space: nowrap;
}
.queueDropdownHost .filterDropdownLabel::after {
  content: ' · work signals';
  color: rgba(23, 19, 61, 0.52);
  font-weight: 700;
}
.chatMetaLine .needsReply, .badge.needsReply {
  box-shadow: 0 6px 16px rgba(137, 96, 220, 0.14);
}
@media (max-width: 1100px) {
  .brandLogo { width: 48px; height: 48px; }
  .brandBlockWithLogo .brand { font-size: 28px !important; }
}

/* v15.13.8 operator notes safety */
.notePinned {
  border-color: rgba(168, 85, 247, 0.32);
  background: rgba(250, 245, 255, 0.72);
}
.noteActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.dangerLink {
  color: #be123c;
}

/* v15.13.14 blocked-client visibility and live operator refresh affordances */
.blockedHeaderBadge{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(190,24,93,.22);
  background:rgba(255,228,230,.88);
  color:#9f1239;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.msg.blockedClientMessage{
  position:relative;
  overflow:hidden;
  opacity:.84;
  border-style:dashed!important;
}
.msg.blockedClientMessage .blockedWatermark{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(-18deg);
  pointer-events:none;
  user-select:none;
  font-size:34px;
  font-weight:1000;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(159,18,57,.13);
  z-index:0;
}
.msg.blockedClientMessage .msgBody,
.msg.blockedClientMessage .msgMeta,
.msg.blockedClientMessage figure,
.msg.blockedClientMessage .messageFileFrame{
  position:relative;
  z-index:1;
}
.composerLocked textarea::placeholder{
  color:#9f1239;
}

/* v15.13.15 UI wiring stabilization */
.quickActionMenu {
  z-index: 10000;
  min-width: 220px;
  padding: 10px;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(17, 24, 39, .96);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.quickActionMenu button {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}
.clientDetailsModal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.48);
}
.clientDetailsModalCard {
  width: min(820px, 96vw);
  max-height: 86vh;
  overflow: auto;
  border-radius: 22px;
  background: var(--panel, #101827);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
  padding: 18px;
}
.detailHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.settingsTabs button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
}
.settingsTabs button.active {
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

/* v15.13.16 SETTINGS GARDEN IMPLEMENTATION
   Scope: Settings UI only. Core messaging, routing, database, audit, and provider logic untouched.
   Goal: integrate Monet atmosphere into the settings workspace instead of leaving artwork trapped in the sidebar. */
#adminView.settingsGardenView {
  position: relative;
  min-height: 100vh;
  padding: 22px 28px 96px !important;
  overflow: auto;
  color: #15124d;
  background:
    linear-gradient(90deg, rgba(255,255,255,.88) 0 24%, rgba(255,255,255,.46) 44%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(255,250,255,.52), rgba(247,245,255,.24)),
    url('/assets/monet-settings-garden.png') right top / cover fixed no-repeat !important;
}
#adminView.settingsGardenView::before {
  content: "";
  position: fixed;
  inset: 0 0 0 var(--sidebar-width, 270px);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255,255,255,.54), transparent 34%),
    radial-gradient(ellipse at 72% 18%, rgba(255,211,221,.14), transparent 36%),
    radial-gradient(ellipse at 88% 84%, rgba(181,158,255,.13), transparent 42%);
  mix-blend-mode: screen;
  opacity: .68;
}
#adminView.settingsGardenView > * {
  position: relative;
  z-index: 1;
}
#adminView.settingsGardenView .settingsGardenTopBar {
  margin-bottom: 8px !important;
}
#adminView.settingsGardenView .globalSearchShell {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(85,70,160,.13) !important;
  backdrop-filter: blur(22px) saturate(1.06) !important;
}
#adminView.settingsGardenView .topStaff {
  color: #19115c !important;
}
.settingsGardenHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, 520px) minmax(320px, 470px) minmax(220px, 1fr);
  align-items: start;
  gap: 28px;
  min-height: 640px;
  margin: 0 0 28px;
  padding: 10px 0 0 22px;
}
.settingsGardenIntro {
  grid-column: 1 / -1;
  max-width: 760px;
  padding-top: 8px;
}
.settingsEyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(82,37,255,.72);
}
.settingsGardenIntro h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(44px, 5vw, 78px);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.065em;
  color: #15105b;
  text-shadow: 0 10px 34px rgba(255,255,255,.88);
}
.settingsGardenIntro > p:not(.settingsEyebrow) {
  max-width: 690px;
  margin: 16px 0 28px;
  color: rgba(22,29,88,.68);
  font-size: 16px;
  line-height: 1.65;
}
#adminView.settingsGardenView .settingsTabs,
#adminView.settingsGardenView .monetSettingsTabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 0 !important;
}
#adminView.settingsGardenView .settingsTabs button,
#adminView.settingsGardenView .monetSettingsTabs button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px !important;
  border: 1px solid rgba(85,70,160,.12) !important;
  color: rgba(27,29,91,.74) !important;
  background: rgba(255,255,255,.54) !important;
  box-shadow: 0 18px 42px rgba(72,46,148,.07), inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(18px) saturate(1.06);
}
#adminView.settingsGardenView .settingsTabs button.active,
#adminView.settingsGardenView .monetSettingsTabs button.active,
#adminView.settingsGardenView .settingsTabs button:hover,
#adminView.settingsGardenView .monetSettingsTabs button:hover {
  color: #5225ff !important;
  background: rgba(244,239,255,.84) !important;
  border-color: rgba(82,37,255,.22) !important;
}
.settingsProfileCard {
  grid-column: 1;
  min-height: 470px;
  padding: 34px 36px 28px;
  border-radius: 30px;
  color: #15124d;
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.54)),
    radial-gradient(ellipse at 12% 4%, rgba(238,222,255,.58), transparent 42%);
  border: 1px solid rgba(85,70,160,.13);
  box-shadow: 0 38px 96px rgba(78,54,150,.16), inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(24px) saturate(1.08);
}
.settingsProfileTitle {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 26px;
}
.settingsProfileTitle > span {
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5225ff;
  background: linear-gradient(135deg, rgba(239,231,255,.96), rgba(255,255,255,.70));
  box-shadow: 0 18px 38px rgba(82,37,255,.13), inset 0 1px 0 rgba(255,255,255,.88);
}
.settingsProfileTitle h2 {
  margin: 0 0 5px;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -.045em;
  color: #15105b;
}
.settingsProfileTitle p,
.settingsProfileCard label {
  color: rgba(22,29,88,.66);
}
.settingsProfileCard label {
  display: block;
  margin: 0 0 17px;
  font-size: 13px;
  font-weight: 820;
}
.settingsProfileCard input {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  padding: 0 15px;
  color: #15124d !important;
  font-weight: 760;
  border-radius: 13px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(85,70,160,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.settingsProfileCard button {
  width: 100%;
  height: 56px;
  margin-top: 10px;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #5225ff, #7128ff 85%) !important;
  border: 0 !important;
  box-shadow: 0 22px 46px rgba(82,37,255,.26), inset 0 1px 0 rgba(255,255,255,.23) !important;
}
.settingsPrivacyNote {
  margin: 20px 0 0;
  color: rgba(22,29,88,.62);
  font-size: 13px;
}
.settingsGardenStatus {
  grid-column: 2;
  align-self: end;
  margin-bottom: 22px;
  max-width: 390px;
  padding: 18px 20px;
  border-radius: 22px;
  color: rgba(20,24,83,.76);
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(85,70,160,.10);
  box-shadow: 0 22px 58px rgba(78,54,150,.10), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(20px) saturate(1.08);
}
.settingsGardenStatus b,
.settingsGardenStatus span {
  display: block;
}
.settingsGardenStatus b {
  margin-bottom: 6px;
  color: #15105b;
  font-size: 15px;
}
.settingsGardenStatus span {
  line-height: 1.5;
  font-size: 13px;
}
#adminView.settingsGardenView .settingsGardenGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 22px !important;
}
#adminView.settingsGardenView .settingsReferenceCard,
#adminView.settingsGardenView .pageCard {
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.56)),
    radial-gradient(ellipse at 0 0, rgba(238,222,255,.35), transparent 42%) !important;
  border: 1px solid rgba(85,70,160,.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 26px 72px rgba(78,54,150,.10), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(22px) saturate(1.06) !important;
}
#adminView.settingsGardenView .settingsReferenceCard::after {
  opacity: .05 !important;
}
.settingsDecisionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
#adminView.settingsGardenView .pageCard {
  margin-bottom: 0 !important;
}
#adminView.settingsGardenView .pageCard h2,
#adminView.settingsGardenView .settingsReferenceCard h2 {
  color: #15105b !important;
}
#adminView.settingsGardenView .meta,
#adminView.settingsGardenView .smallEmpty,
#adminView.settingsGardenView .field,
#adminView.settingsGardenView .summary {
  color: rgba(22,29,88,.64) !important;
}
#adminView.settingsGardenView .smallEmpty,
#adminView.settingsGardenView .note,
#adminView.settingsGardenView .tableRow,
#adminView.settingsGardenView .messagingHealthCard.status-green,
#adminView.settingsGardenView .messagingHealthCard.status-red,
#adminView.settingsGardenView .issueSummary,
#adminView.settingsGardenView .issueResolution {
  background: rgba(255,255,255,.58) !important;
  border-color: rgba(85,70,160,.12) !important;
}
@media (max-width: 1500px) {
  .settingsGardenHero { grid-template-columns: minmax(360px, 500px) minmax(260px, 1fr); min-height: 600px; }
  .settingsGardenStatus { grid-column: 2; }
  #adminView.settingsGardenView .settingsGardenGrid,
  .settingsDecisionGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 1100px) {
  #adminView.settingsGardenView { background-position: center top !important; }
  .settingsGardenHero { grid-template-columns: 1fr; padding-left: 0; min-height: unset; }
  .settingsGardenIntro, .settingsProfileCard, .settingsGardenStatus { grid-column: 1; max-width: none; }
  #adminView.settingsGardenView .settingsGardenGrid,
  .settingsDecisionGrid { grid-template-columns: 1fr !important; }
}


/* v15.13.18 SETTINGS APPROVED ARTWORK CLEANUP
   UI-only cleanup: remove old bottom-left underwater Monet decoration so the approved Settings artwork becomes the only atmospheric image. */
body::after,
.sidebar::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* v15.13.19 SETTINGS BACKDROP FIX
   Scope: visual CSS/assets only. Removes old lower-left water-lily artwork and forces the approved
   Kevin Monet portrait as the Settings backdrop with stronger presence. Core/backend untouched. */
body::after,
.sidebar::before {
  display: none !important;
  background: none !important;
}

#adminView.settingsGardenView {
  background:
    linear-gradient(90deg, rgba(255,255,255,.80) 0 22%, rgba(255,255,255,.34) 42%, rgba(255,255,255,.02) 100%),
    linear-gradient(180deg, rgba(255,250,255,.28), rgba(247,245,255,.10)),
    url('/assets/monet-settings-garden.png') center center / cover fixed no-repeat !important;
}

#adminView.settingsGardenView::before {
  opacity: .42 !important;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255,255,255,.38), transparent 34%),
    radial-gradient(ellipse at 78% 16%, rgba(255,211,221,.10), transparent 36%),
    radial-gradient(ellipse at 88% 84%, rgba(181,158,255,.08), transparent 42%) !important;
}

#adminView.settingsGardenView .settingsProfileCard,
#adminView.settingsGardenView .settingsReferenceCard,
#adminView.settingsGardenView .pageCard,
#adminView.settingsGardenView .settingsGardenStatus {
  background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.50)) !important;
}

/* v15.13.20 CONVERSATION POND BACKDROP
   Scope: Conversation workspace UI only. Core messaging, routing, database, audit, and provider logic untouched.
   Goal: place the approved Monet pond image into the Conversations page without changing the UI layout. */
body::after,
.sidebar::before {
  display: none !important;
}

#mainInboxView {
  position: relative !important;
  isolation: isolate !important;
}

#mainInboxView::before {
  content: "";
  position: fixed;
  inset: 0 0 0 var(--sidebar-width, 288px);
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.54) 34%, rgba(255,255,255,.36) 100%),
    linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(246,244,255,.24) 54%, rgba(236,242,255,.30) 100%),
    url('/assets/monet-conversation-pond.png') center center / cover fixed no-repeat;
  opacity: .88;
  filter: saturate(1.06) contrast(1.02) brightness(1.03);
}

#mainInboxView > * {
  position: relative;
  z-index: 1;
}

body[data-active-view="inbox"] .listPane,
body[data-active-view="inbox"] .chatPane,
body[data-active-view="inbox"] .profilePane,
body[data-active-view="inbox"] .monetSignalCard,
body[data-active-view="inbox"] .globalSearchShell {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(12px) saturate(1.04) !important;
}


/* v15.13.21 Conversation UI simplification
   Removes redundant Quick Action/top bell affordances and sidebar wordmark.
   HTML no longer renders these elements; these guards prevent stale markup from reappearing visually. */
.brandTextGroup,
.quickActionButton,
.quickActionMenu,
.topBell {
  display: none !important;
}
.brandBlockWithLogo {
  justify-content: center !important;
}

/* Real UI preview mode banner */
.demoModeBanner {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding: 8px 14px;
  background: #2f174d;
  color: #fff;
  font-size: 13px;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(31, 12, 55, .18);
}
.demoModeBanner b { color: #f3dcff; }
body.demoMode { --snappy-demo-mode: 1; }


/* v15.13.26 Actual UI preview navigation
   This lives inside the real SnapPy UI, not an iframe preview shell. */
.actualUiPreviewNav {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: min(620px, calc(100vw - 36px));
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  background: rgba(33, 21, 50, .48);
  box-shadow: 0 20px 55px rgba(39, 22, 62, .24), inset 0 1px 0 rgba(255,255,255,.24);
  backdrop-filter: blur(18px) saturate(1.15);
}
.actualUiPreviewNav button {
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  padding: 8px 12px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.10);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.actualUiPreviewNav button.active {
  color: #2a2138;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(28, 17, 47, .20);
}
@media (max-width: 720px) {
  .actualUiPreviewNav {
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 22px;
  }
}

/* v15.13.29 Architect verified: Conversations bottom status dock removed + larger official logo */
.systemControlDock,
body[data-active-view="inbox"] .systemControlDock,
body.demoMode .systemControlDock {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.brandBlockWithLogo {
  justify-content: center !important;
  padding: 6px 0 22px !important;
}
.brandLogo {
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  max-height: 104px !important;
  object-fit: contain !important;
  border-radius: 24px !important;
}
@media (max-width: 1100px) {
  .brandLogo {
    width: 86px !important;
    height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;
  }
}


/* v15.13.30 SETTINGS TRANSPARENCY TUNING */
#adminView.settingsGardenView .sidebar{
  background: rgba(255,255,255,0.60) !important;
}
#adminView.settingsGardenView .settingsProfileCard,
#adminView.settingsGardenView .settingsReferenceCard,
#adminView.settingsGardenView .pageCard,
#adminView.settingsGardenView .settingsGardenStatus{
  background: rgba(255,255,255,0.90) !important;
}

/* v15.13.31 Architect verified: logo render size correction + persistent bottom status cleanup */
.systemControlDock,
body .systemControlDock,
body[data-active-view="inbox"] .systemControlDock,
body.demoMode .systemControlDock,
#globalProtectionStatus {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.brandBlockWithLogo {
  justify-content: center !important;
  align-items: center !important;
  padding: 4px 0 28px !important;
}
.brandLogo {
  width: 152px !important;
  height: 152px !important;
  max-width: 152px !important;
  max-height: 152px !important;
  object-fit: contain !important;
  border-radius: 30px !important;
  flex: 0 0 152px !important;
}
@media (max-width: 1100px) {
  .brandLogo {
    width: 118px !important;
    height: 118px !important;
    max-width: 118px !important;
    max-height: 118px !important;
    flex-basis: 118px !important;
  }
}

/* v15.13.32 Architect verified: empty-page atmosphere artwork pass
   Scope: visual assets/CSS only. Uses exact supplied images, copied unchanged.
   Page assignment:
   - Me: garden path image
   - Documents: sunset pond image
   - Audit Trail: waterfall image
   Core/backend untouched. */
#summaryView,
#documentsView,
#auditView {
  position: relative !important;
  isolation: isolate !important;
  overflow: auto !important;
}

#summaryView::before,
#documentsView::before,
#auditView::before {
  content: "";
  position: fixed;
  inset: 0 0 0 var(--sidebar-width, 288px);
  pointer-events: none;
  z-index: 0;
  opacity: .92;
  filter: saturate(1.03) contrast(1.01) brightness(1.02);
}

#summaryView > *,
#documentsView > *,
#auditView > * {
  position: relative;
  z-index: 1;
}

#summaryView::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.56) 36%, rgba(255,255,255,.28) 100%),
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(246,244,255,.24)),
    url('/assets/monet-me-garden-path.png') center center / cover fixed no-repeat !important;
}

#documentsView::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.54) 34%, rgba(255,255,255,.30) 100%),
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(246,244,255,.20)),
    url('/assets/monet-documents-sunset-pond.png') center center / cover fixed no-repeat !important;
}

#auditView::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.60) 38%, rgba(255,255,255,.34) 100%),
    linear-gradient(180deg, rgba(255,255,255,.54), rgba(246,244,255,.24)),
    url('/assets/monet-audit-waterfall.png') center center / cover fixed no-repeat !important;
}

body[data-active-view="summary"] #summaryView .pageHeader,
body[data-active-view="summary"] #summaryView .pageCard,
body[data-active-view="summary"] #summaryView .summaryCard,
body[data-active-view="documents"] #documentsView .pageHeader,
body[data-active-view="documents"] #documentsView .pageCard,
body[data-active-view="documents"] #documentsView .tableRow,
body[data-active-view="audit"] #auditView .pageHeader,
body[data-active-view="audit"] #auditView .pageCard,
body[data-active-view="audit"] #auditView .tableRow {
  background: rgba(255,255,255,.84) !important;
  backdrop-filter: blur(12px) saturate(1.04) !important;
  border-color: rgba(92, 78, 140, .16) !important;
}

/* v15.13.33 ARCHITECT FIX: empty-page artwork visibility + glass fade restoration
   Scope: CSS only. Exact supplied images remain unchanged.
   Fixes: Me/Audit/Documents backgrounds were not visually surfacing in preview;
   applies active-view body backgrounds and final glass opacity guards. */
body[data-active-view="summary"],
body[data-active-view="documents"],
body[data-active-view="audit"] {
  background-color: #f8f4ff !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

body[data-active-view="summary"] {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.42) 35%, rgba(255,255,255,.34)),
    url('/assets/monet-me-garden-path.png') !important;
}

body[data-active-view="documents"] {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.42) 35%, rgba(255,255,255,.34)),
    url('/assets/monet-documents-sunset-pond.png') !important;
}

body[data-active-view="audit"] {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.42) 35%, rgba(255,255,255,.34)),
    url('/assets/monet-audit-waterfall.png') !important;
}

body[data-active-view="summary"] .sidebar,
body[data-active-view="documents"] .sidebar,
body[data-active-view="audit"] .sidebar {
  background: rgba(255,255,255,.10) !important;
  border-right: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 18px 0 60px rgba(39, 30, 68, .08), inset -1px 0 0 rgba(255,255,255,.25) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
}

body[data-active-view="summary"] .nav,
body[data-active-view="documents"] .nav,
body[data-active-view="audit"] .nav {
  color: #17133d !important;
  text-shadow: 0 1px 8px rgba(255,255,255,.72) !important;
}

body[data-active-view="summary"] .nav.navActive,
body[data-active-view="documents"] .nav.navActive,
body[data-active-view="audit"] .nav.navActive,
body[data-active-view="summary"] .nav:hover,
body[data-active-view="documents"] .nav:hover,
body[data-active-view="audit"] .nav:hover {
  background: rgba(244,239,255,.54) !important;
  border-color: rgba(91,25,242,.18) !important;
}

body[data-active-view="summary"] #summaryView,
body[data-active-view="documents"] #documentsView,
body[data-active-view="audit"] #auditView {
  background: transparent !important;
}

body[data-active-view="summary"] #summaryView::before,
body[data-active-view="documents"] #documentsView::before,
body[data-active-view="audit"] #auditView::before {
  display: none !important;
  content: none !important;
}

body[data-active-view="summary"] #summaryView .pageHeader,
body[data-active-view="summary"] #summaryView .pageCard,
body[data-active-view="summary"] #summaryView .summaryCard,
body[data-active-view="documents"] #documentsView .pageHeader,
body[data-active-view="documents"] #documentsView .pageCard,
body[data-active-view="documents"] #documentsView .tableRow,
body[data-active-view="audit"] #auditView .pageHeader,
body[data-active-view="audit"] #auditView .pageCard,
body[data-active-view="audit"] #auditView .tableRow {
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(14px) saturate(1.06) !important;
  border-color: rgba(92, 78, 140, .16) !important;
}