/* SitePass premium messaging system — restrained graphite, warm white and titanium. */
:root{
  --msg-paper:#fafaf7;
  --msg-surface:#fdfdfb;
  --msg-ink:#151719;
  --msg-secondary:#696e70;
  --msg-tertiary:#989d9b;
  --msg-line:#dedfda;
  --msg-line-strong:#cfd2cd;
  --msg-titanium:#eceeea;
  --msg-graphite:#1b1e20;
  --msg-accent:#356756;
  --msg-accent-strong:#285446;
  --msg-accent-soft:#e7f0eb;
  --msg-notification:#df5554;
  --msg-success:#42705a;
  --msg-warning:#8a6a36;
  --msg-danger:#9b5652;
}

/* Header and tabs: text hierarchy replaces the old stack of rounded pills. */
.page:has(#messagesBody){background:var(--msg-paper)}
.page:has(#messagesBody) .pageHead{padding:calc(24px + env(safe-area-inset-top)) 16px 12px}
.page:has(#messagesBody) .pageHead h1{font-size:32px;font-weight:820;letter-spacing:-.052em}
.page:has(#messagesBody)>.tabs{
  position:relative;
  gap:24px;
  margin:0 16px;
  padding:0;
  border-bottom:1px solid var(--msg-line);
}
.page:has(#messagesBody)>.tabs button{
  position:relative;
  height:46px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--msg-secondary);
  font-size:11px;
  font-weight:720;
  letter-spacing:-.01em;
}
.page:has(#messagesBody)>.tabs button.on{background:transparent;color:var(--msg-ink);box-shadow:none}
.page:has(#messagesBody)>.tabs button.on:after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--msg-accent);
}
.page:has(#messagesBody) .tabCount{
  min-width:17px;
  height:17px;
  padding:0 5px;
  border:1px solid var(--msg-line-strong);
  border-radius:6px;
  background:transparent!important;
  color:var(--msg-secondary)!important;
  font-size:7px;
  font-weight:820;
}
.page:has(#messagesBody) .tabs button.on .tabCount{border-color:#aebdb5;background:var(--msg-accent-soft)!important;color:var(--msg-accent-strong)!important}

/* Conversation index: real avatar treatment and calmer typography. */
.page:has(#messagesBody) .listSection{margin:17px 16px 0}
.page:has(#messagesBody) .listSection+.listSection{margin-top:22px}
.page:has(#messagesBody) .listLabel{
  padding:0 0 8px;
  color:var(--msg-tertiary);
  font-size:8px;
  font-weight:780;
  letter-spacing:.08em;
}
.page:has(#messagesBody) .chatRow{
  min-height:72px;
  gap:13px!important;
  padding:12px 1px!important;
  border-color:var(--msg-line)!important;
}
.page:has(#messagesBody) .chatAvatar{
  flex:0 0 48px;
  width:48px!important;
  height:48px!important;
  border:1px solid var(--msg-accent-strong);
  border-radius:50%!important;
  background:linear-gradient(145deg,var(--msg-accent-strong),var(--msg-accent))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 4px 12px rgba(20,23,25,.06);
  color:#f7f8f5!important;
  font-size:9px!important;
  font-weight:780;
  letter-spacing:.07em;
}
.page:has(#messagesBody) .chatAvatar.site{
  border-color:#cddbd3!important;
  background:linear-gradient(180deg,#f7fbf8,var(--msg-accent-soft))!important;
  box-shadow:inset 0 1px 0 #fff;
  color:var(--msg-accent-strong)!important;
}
.page:has(#messagesBody) .chatMain b{font-size:12px!important;font-weight:780;letter-spacing:-.012em}
.page:has(#messagesBody) .chatMain small{margin-top:4px;color:var(--msg-secondary);font-size:9px!important;line-height:1.35}
.page:has(#messagesBody) .chatMeta time{color:var(--msg-tertiary);font-size:8px}
.page:has(#messagesBody) .unread{
  min-width:17px;
  height:17px;
  margin-top:7px;
  padding:0 5px;
  border:0;
  border-radius:999px;
  background:var(--msg-notification);
  color:#fff;
  font-size:7px;
  box-shadow:none;
}

/* Requests: one coherent surface instead of five floating dashboard cards. */
.requestInline{padding:15px 16px 34px}
.requestInlineHead{padding:4px 0 17px}
.requestInlineHead b{font-size:18px;font-weight:810;letter-spacing:-.025em}
.requestInlineHead small{margin-top:3px;color:var(--msg-secondary);font-size:8px}
.requestInlineHead button{
  height:38px;
  padding:0 14px;
  border:1px solid var(--msg-accent-strong);
  border-radius:12px;
  background:linear-gradient(180deg,var(--msg-accent),var(--msg-accent-strong));
  box-shadow:0 6px 16px rgba(40,84,70,.12);
  color:#fff;
  font-size:9px;
  font-weight:780;
}
.requestInlineTabs{
  position:relative;
  gap:22px;
  margin-bottom:9px;
  padding:0;
  border-bottom:1px solid var(--msg-line);
}
.requestInlineTabs button{
  position:relative;
  height:40px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--msg-tertiary);
  font-size:8px;
  font-weight:760;
}
.requestInlineTabs button.on{border:0;background:transparent;color:var(--msg-ink)}
.requestInlineTabs button.on:after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--msg-accent);
}
.requestCardList{
  display:block;
  overflow:hidden;
  border:1px solid var(--msg-line);
  border-radius:20px;
  background:var(--msg-surface);
  box-shadow:0 12px 34px rgba(20,23,25,.045);
}
.requestCard{
  min-height:88px;
  grid-template-columns:44px minmax(0,1fr) 10px;
  gap:13px;
  padding:15px 14px;
  border:0;
  border-bottom:1px solid var(--msg-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.requestCard:last-child{border-bottom:0}
.requestCard:active{background:#f4f5f1}
.requestCardIcon{
  width:44px;
  height:44px;
  border:1px solid #cfddd5;
  border-radius:50%;
  background:linear-gradient(180deg,#f8fbf9,var(--msg-accent-soft));
  box-shadow:inset 0 1px 0 #fff;
  color:var(--msg-accent-strong)!important;
}
.requestCardIcon svg{width:20px;height:20px;stroke-width:1.55}
.requestCardIcon.large{width:52px;height:52px;border-radius:50%}
.requestCardIcon.large svg{width:23px;height:23px}
.requestCardTitle{align-items:flex-start}
.requestCardTitle strong{font-size:11px;font-weight:790;line-height:1.35;letter-spacing:-.01em}
.requestCardMain small{margin-top:4px;color:var(--msg-tertiary);font-size:7.5px}
.requestCardMain p{margin-top:5px;color:var(--msg-secondary);font-size:8.5px;line-height:1.35}
.requestChevron{color:#9ca19f;font-size:16px;font-weight:350}
.reqStatus{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:#5e6362!important;font-size:7.5px;font-weight:760}
.reqStatus.pending,.reqStatus.pending_approval,.reqStatus.pending_confirmation{color:var(--msg-warning)!important}
.reqStatus:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--msg-warning)}
.reqStatus.approved:before,.reqStatus.confirmed:before,.reqStatus.adjusted:before{background:var(--msg-success)}
.reqStatus.rejected:before{background:var(--msg-danger)}
.reqStatus.approved,.reqStatus.confirmed,.reqStatus.adjusted{color:var(--msg-success)!important}.reqStatus.rejected{color:var(--msg-danger)!important}

/* Conversation detail follows the same visual system. */
.conversationHead{padding:18px 16px;border-color:var(--msg-line);background:var(--msg-paper)}
.conversationAvatar{
  width:50px;
  height:50px;
  flex-basis:50px;
  border:1px solid var(--msg-accent-strong);
  border-radius:50%;
  background:linear-gradient(145deg,var(--msg-accent-strong),var(--msg-accent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  font-size:9px;
  letter-spacing:.07em;
}
.conversationHead h1{font-size:19px;font-weight:810}.conversationHead p{font-size:8px}
.messageAvatar{border:1px solid var(--msg-line-strong);border-radius:50%;background:var(--msg-titanium)}
.messageRow.me .messageAvatar{border-color:var(--msg-accent-strong);background:var(--msg-accent)}
.messageBubble{border:1px solid var(--msg-line);border-radius:5px 15px 15px;background:#f1f2ee;box-shadow:none}
.messageRow.me .messageBubble{border-color:var(--msg-accent-strong);border-radius:15px 5px 15px 15px;background:var(--msg-accent-strong)}
.chatComposer{border-color:var(--msg-line);background:rgba(250,250,247,.94)}
.chatComposer input{border-color:var(--msg-line-strong);border-radius:13px;background:var(--msg-surface)}
.chatComposer button{border-radius:13px;background:var(--msg-accent);font-weight:780}

/* Bottom navigation and counts now share one icon weight and badge geometry. */
.bottomNav{height:76px;padding-top:7px;background:rgba(250,250,247,.94);border-color:var(--msg-line);box-shadow:0 -10px 32px rgba(20,23,25,.035)}
.navBtn{color:#8e9391;font-size:8px;font-weight:620}
.navBtn.on{color:var(--msg-accent-strong);font-weight:780}
.navBtn svg{width:23px;height:23px;margin-bottom:4px;stroke-width:1.65}
.msgNavBadge,.navBtn[data-page="workbench"][data-alert]:after{
  top:3px!important;
  left:calc(50% + 7px)!important;
  min-width:17px!important;
  height:17px!important;
  padding:0 5px!important;
  border:1.5px solid var(--msg-paper)!important;
  border-radius:999px!important;
  background:var(--msg-notification)!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:800!important;
}

@media (prefers-color-scheme:dark){
  :root{
    --msg-paper:#151718;
    --msg-surface:#1b1e1f;
    --msg-ink:#f3f4f1;
    --msg-secondary:#b2b6b4;
    --msg-tertiary:#818684;
    --msg-line:#2b2f2e;
    --msg-line-strong:#3a3e3c;
    --msg-titanium:#252928;
    --msg-graphite:#f0f1ee;
    --msg-accent:#68a68e;
    --msg-accent-strong:#8bc3ad;
    --msg-accent-soft:#22372f;
    --msg-notification:#f06a67;
    --msg-success:#83b69e;
    --msg-warning:#d0ae72;
    --msg-danger:#d58a85;
  }
  .page:has(#messagesBody),.conversationHead{background:var(--msg-paper)}
  .page:has(#messagesBody)>.tabs button.on:after,.requestInlineTabs button.on:after{background:var(--msg-accent-strong)}
  .requestInlineHead button,.chatComposer button{border-color:var(--msg-accent);background:var(--msg-accent);color:#101c17;box-shadow:none}
  .requestCardList{background:var(--msg-surface);box-shadow:none}
  .requestCard:active{background:#222625}
  .requestCardIcon{border-color:#355147;background:linear-gradient(180deg,#263b33,#20332c);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);color:var(--msg-accent-strong)!important}
  .page:has(#messagesBody) .chatAvatar{border-color:#4d806d;background:linear-gradient(145deg,#477865,#315b4c)!important;color:#f5faf7!important}
  .page:has(#messagesBody) .chatAvatar.site{border-color:#355147!important;background:#22372f!important;color:var(--msg-accent-strong)!important;box-shadow:none}
  .page:has(#messagesBody) .unread{background:var(--msg-notification);color:#fff}
  .conversationAvatar{border-color:#4d806d;background:linear-gradient(145deg,#477865,#315b4c);color:#f5faf7}
  .messageAvatar{background:#252928}.messageRow.me .messageAvatar{border-color:#4d806d;background:#315b4c;color:#f5faf7}
  .messageBubble{background:#222625}.messageRow.me .messageBubble{border-color:#426f5e;background:#315b4c;color:#f5faf7}
  .chatComposer{background:rgba(21,23,24,.94)}.chatComposer input{background:#1b1e1f;color:#f3f4f1}
  .bottomNav{background:rgba(21,23,24,.95)}
  .msgNavBadge,.navBtn[data-page="workbench"][data-alert]:after{border-color:#151718!important;background:var(--msg-notification)!important;color:#fff!important}
}