/* Compact header and available-height workspace for Communications only. */
.main:has(#section-contact.active) > .topbar {
  min-height: 56px;
  margin-bottom: 10px;
  gap: 16px;
  padding: 8px 0;
}
.main:has(#section-contact.active) > .topbar .eyebrow { display: none; }
.main:has(#section-contact.active) > .topbar h2 { margin: 0; font-size: 22px; line-height: 1.3; }
.main:has(#section-contact.active) > .topbar .top-actions { gap: 10px; min-width: 0; }
.main:has(#section-contact.active) > .topbar .sync-state { max-width: 600px; font-size: 11px; line-height: 1.4; }
.main:has(#section-contact.active) > .topbar .btn { padding: 8px 12px; font-size: 12px; white-space: nowrap; border-radius: 8px; }

#section-contact .communications-tabs { gap: 5px; margin-bottom: 8px; padding: 3px; border: 1px solid #263143; border-radius: 10px; background: #10151e; width: max-content; max-width: 100%; }
#section-contact .communications-tabs button { min-height: 32px; border: 1px solid transparent; border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; background: transparent; }
#section-contact .communications-tabs button.active { background: #203454; border-color: #365782; color: #edf4ff; }
#section-contact .communications-tabs button:focus-visible { outline: 2px solid #82aaff; outline-offset: 2px; }
#section-contact #b2bTabUnread:empty { display: none; }
#section-contact .communications-pane-head { gap: 10px; align-items: center; margin-bottom: 10px; }
#section-contact #contactReload { padding: 7px 11px; min-height: 34px; border-radius: 8px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
#section-contact .contact-channels { align-items: center; gap: 6px; margin: 0; min-width: 0; }
#section-contact details.contact-channel { display: block; position: relative; padding: 0; border-radius: 8px; background: #111720; }
#section-contact .contact-channel summary { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 8px; font-size: 12px; list-style: none; cursor: pointer; white-space: nowrap; }
#section-contact .contact-channel summary::-webkit-details-marker { display: none; }
#section-contact .contact-channel summary:focus-visible { outline: 2px solid #82aaff; outline-offset: 2px; border-radius: 8px; }
#section-contact .contact-channel summary:hover { background: #1a2536; border-radius: 8px; }
#section-contact .contact-channel small { color: #a1aec0; font-size: 11px; }
#section-contact .contact-channel-chevron { font-size: 13px; color: #90a2bd; }
#section-contact .contact-channel[open] { border-color: #45658f; }
#section-contact .contact-channel[open] .contact-channel-chevron { transform: rotate(180deg); }
#section-contact .contact-channel-detail { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: grid; gap: 5px; width: 245px; max-width: calc(100vw - 32px); padding: 12px 14px; border: 1px solid #35455d; border-radius: 9px; background: #151e2b; color: #c5d0e1; font-size: 12px; line-height: 1.5; box-shadow: 0 10px 28px #0006; }
#section-contact .contact-channel-detail b { color: #e8eef8; }
#section-contact .contact-channel:not([open]) > .contact-channel-detail { display: none; }
#section-contact .contact-channel:last-child .contact-channel-detail { left: auto; right: 0; }

#section-contact .communication-thread-recency { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 16px; }
#section-contact .communication-last-date { display: inline-block; color: #a6b3c6; font-size: 11px; font-weight: 400; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
#section-contact .communication-last-date.unavailable { color: #6f7c90; }

/* B2B keeps its actions and counts, with a smaller introductory strip. */
#section-contact .b2b-comms-toolbar { gap: 12px; align-items: center; margin-bottom: 8px; }
#section-contact .b2b-comms-toolbar .eyebrow { display: none; }
#section-contact .b2b-comms-toolbar p { margin: 0; font-size: 12px; }
#section-contact .b2b-comms-actions { flex-shrink: 0; }
#section-contact .b2b-comms-actions .btn { min-height: 34px; padding: 7px 11px; border-radius: 8px; font-size: 12px; }
#section-contact .b2b-source-channels { gap: 6px; padding-bottom: 8px; }
#section-contact .b2b-source-pill { min-width: 0; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; }
#section-contact .b2b-source-pill span { font-size: 11px; font-weight: 600; white-space: nowrap; }
#section-contact .b2b-source-pill b { font-size: 12px; }
#section-contact .b2b-source-pill small { display: none; }
#section-contact .b2b-summary { gap: 6px; margin-bottom: 8px; }
#section-contact .b2b-summary span { padding: 4px 8px; }

@media (min-width: 781px) {
  body:has(#appView:not(.hidden) #section-contact.active) { overflow: hidden; }
  #appView:has(#section-contact.active) { height: 100vh; height: 100dvh; min-height: 0; }
  .main:has(#section-contact.active) { height: 100%; min-height: 0; display: flex; flex-direction: column; padding-bottom: 14px; overflow: hidden; }
  .main:has(#section-contact.active) > .topbar { flex: 0 0 auto; }
  #section-contact.active { flex: 1; min-height: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 12px; }
  #section-contact > .communications-tabs { grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
  #contactMarketplacePane:not(.hidden) { display: contents; }
  #contactMarketplacePane > .communications-pane-head { grid-column: 2; grid-row: 1; margin: 0; }
  #contactMarketplacePane > .contact-center { grid-column: 1 / -1; grid-row: 2; height: 100%; min-height: 0; border-radius: 12px; }
  #b2bCommsPane:not(.hidden) { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; }
  #b2bCommsPane > :not(.b2b-comms) { flex: 0 0 auto; }
  #section-contact .b2b-comms { flex: 1; height: auto; min-height: 0; border-radius: 12px; }
  #section-contact .contact-center, #section-contact .b2b-comms { grid-template-rows: minmax(0, 1fr); }
  #section-contact .contact-dialog-pane, #section-contact .b2b-comms-list-pane, #section-contact .b2b-comms-dialog-pane { min-height: 0; }
}
@media (min-width: 781px) and (max-width: 1400px) {
  #section-contact.active { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; }
  #section-contact > .communications-tabs { grid-column: 1; grid-row: 1; }
  #contactMarketplacePane > .communications-pane-head { grid-column: 1; grid-row: 2; }
  #contactMarketplacePane > .contact-center { grid-row: 3; }
  #b2bCommsPane:not(.hidden) { grid-row: 2 / -1; }
}
@media (max-width: 780px) {
  .main:has(#section-contact.active) > .topbar { flex-wrap: wrap; gap: 8px; }
  .main:has(#section-contact.active) > .topbar .top-actions { flex: 1 1 auto; justify-content: flex-end; }
  .main:has(#section-contact.active) > .topbar .sync-state { max-width: 100%; }
  #section-contact .communications-tabs { overflow-x: auto; }
  #section-contact .communications-tabs button { padding: 6px 9px; }
  #section-contact .communications-pane-head { align-items: flex-start; flex-wrap: wrap; }
  #section-contact .contact-channels { flex: 1 1 240px; }
  #section-contact #contactReload { margin-left: auto; }
  #section-contact .contact-channel summary { gap: 5px; font-size: 11px; }
  #section-contact .contact-channel .contact-brand-logo { width: 16px; height: 16px; }
  #section-contact .contact-channel-detail { position: fixed; top: auto; left: 16px !important; right: 16px !important; width: auto; margin-top: 6px; }
  #section-contact .b2b-comms-toolbar { align-items: flex-start; }
}