/* 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; }
}


/* === BF5 COMMUNICATIONS COMMAND 2026-10-11 === */
body:has(#appView:not(.hidden) #section-contact.active){
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 5%,rgba(66,112,166,.10),transparent 27%),
    radial-gradient(circle at 14% 72%,rgba(207,123,44,.045),transparent 22%),
    linear-gradient(180deg,#071019 0%,#05090e 100%);
}
.main:has(#section-contact.active){
  height:100vh;
  height:100dvh;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:12px 14px 14px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(7,13,20,.97),rgba(5,9,14,.995));
}
.main:has(#section-contact.active) > .topbar{
  display:none!important;
}
#section-contact.active{
  flex:1;
  min-height:0;
  display:flex!important;
  flex-direction:column;
  gap:10px;
  max-width:none;
}
#section-contact .communications-command-hero{
  position:relative;
  flex:0 0 auto;
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  overflow:hidden;
  padding:18px 22px;
  border:1px solid #2a435e;
  border-radius:18px;
  background:
    linear-gradient(112deg,rgba(16,31,45,.98),rgba(9,17,26,.985) 48%,rgba(7,13,19,.995)),
    #09111a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 48px rgba(0,0,0,.26);
}
#section-contact .communications-command-hero::before{
  content:"";
  position:absolute;
  width:650px;
  height:220px;
  right:-80px;
  top:-165px;
  border:1px solid rgba(90,145,204,.33);
  border-radius:50%;
  transform:rotate(-8deg);
  box-shadow:0 0 20px rgba(61,122,189,.12);
  pointer-events:none;
}
#section-contact .communications-command-hero::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:42%;
  height:3px;
  background:linear-gradient(90deg,transparent,#c77932 35%,#f0a55b 62%,transparent);
  opacity:.72;
  box-shadow:0 0 14px rgba(225,138,56,.18);
}
#section-contact .communications-command-copy,
#section-contact .communications-command-hud{
  position:relative;
  z-index:1;
}
#section-contact .communications-command-kicker{
  display:block;
  color:#7fa3c8;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}
#section-contact .communications-command-copy h3{
  position:relative;
  margin:8px 0 5px;
  padding-left:18px;
  color:#f2f5f8;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.03em;
}
#section-contact .communications-command-copy h3::before{
  content:"";
  position:absolute;
  left:0;
  top:1px;
  width:2px;
  height:34px;
  background:linear-gradient(180deg,#8cc3f5,#537da5);
  box-shadow:0 0 10px rgba(114,171,223,.35);
}
#section-contact .communications-command-copy p{
  max-width:820px;
  margin:0;
  color:#91a2b3;
  font-size:11px;
  line-height:1.55;
}
#section-contact .communications-command-hud{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
}
#section-contact .communications-hud-live,
#section-contact .communications-hud-stat{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:1px solid #314a63;
  border-radius:7px;
  background:rgba(8,18,27,.72);
  backdrop-filter:blur(8px);
}
#section-contact .communications-hud-live{
  color:#b4d1eb;
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
}
#section-contact .communications-hud-live i{
  width:6px;height:6px;border-radius:50%;
  background:#62d9a5;
  box-shadow:0 0 10px rgba(98,217,165,.58);
}
#section-contact .communications-hud-stat{
  display:grid;
  align-content:center;
  gap:2px;
}
#section-contact .communications-hud-stat small{
  color:#657e98;
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.11em;
}
#section-contact .communications-hud-stat b{
  color:#d9e5ef;
  font-size:8px;
  letter-spacing:.06em;
}

#section-contact .communications-tabs{
  flex:0 0 auto;
  width:max-content;
  max-width:100%;
  display:flex;
  gap:6px;
  margin:0!important;
  padding:5px!important;
  border:1px solid #273e57!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#0a151f,#071019)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
#section-contact .communications-tabs button{
  position:relative;
  min-height:42px!important;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  color:#7f94a9!important;
  background:transparent!important;
  font-size:10px!important;
  font-weight:750!important;
  letter-spacing:.015em;
}
#section-contact .communications-tab-code{
  color:#59728a;
  font-size:7px;
  font-weight:900;
  letter-spacing:.14em;
}
#section-contact .communications-tabs button:hover{
  color:#dbe6ef!important;
  border-color:#2d4a67!important;
  background:#0e2132!important;
}
#section-contact .communications-tabs button.active{
  color:#f4f7fa!important;
  border-color:#4a749a!important;
  background:
    linear-gradient(135deg,rgba(38,76,109,.94),rgba(20,42,62,.96))!important;
  box-shadow:inset 3px 0 0 #6ea2ce,0 0 18px rgba(73,122,166,.10)!important;
}
#section-contact .communications-tabs button.active .communications-tab-code{
  color:#e3a05a;
}
#section-contact #b2bTabUnread:not(:empty){
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  margin-left:2px;
  padding:0 5px;
  border:1px solid #a95b2d;
  border-radius:99px;
  background:#5c2d18;
  color:#ffc997;
  font-size:7px;
}

#section-contact .communications-pane{
  flex:1;
  min-height:0;
}
#section-contact #contactMarketplacePane:not(.hidden),
#section-contact #b2bCommsPane:not(.hidden){
  display:flex!important;
  flex-direction:column;
  min-height:0;
  gap:8px;
}
#section-contact .communications-pane-head{
  flex:0 0 auto;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0!important;
  padding:0 2px;
}
#section-contact .contact-channels{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0!important;
  overflow-x:auto;
  scrollbar-width:none;
}
#section-contact .contact-channels::-webkit-scrollbar{display:none}
#section-contact details.contact-channel{
  flex:0 0 auto;
  border:1px solid #2a445f;
  border-radius:7px!important;
  background:#0b1824!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
}
#section-contact .contact-channel summary{
  min-height:34px!important;
  padding:5px 9px!important;
  color:#9eb0c1;
  font-size:9px!important;
}
#section-contact .contact-channel.connected{
  border-color:#315b59;
}
#section-contact .contact-channel.connected .contact-channel-state{
  background:#59d4a2;
  box-shadow:0 0 9px rgba(89,212,162,.35);
}
#section-contact .contact-channel summary:hover{
  background:#10273a!important;
}
#section-contact .contact-channel-detail{
  width:255px!important;
  border:1px solid #35516b!important;
  border-radius:8px!important;
  background:rgba(10,24,36,.98)!important;
  color:#bdc9d5!important;
  box-shadow:0 18px 46px rgba(0,0,0,.48)!important;
}
#section-contact #contactReload,
#section-contact #b2bReload{
  min-height:36px;
  padding:0 11px;
  border:1px solid #334c64;
  border-radius:7px;
  color:#aebfce;
  background:#0a1722;
}
#section-contact #contactReload:hover,
#section-contact #b2bReload:hover{
  color:#fff;
  border-color:#4b6f91;
  background:#10263a;
}

#section-contact .contact-center,
#section-contact .b2b-comms{
  flex:1!important;
  min-height:0!important;
  height:auto!important;
  display:grid;
  grid-template-columns:380px minmax(0,1fr);
  overflow:hidden;
  border:1px solid #2a455f!important;
  border-radius:14px!important;
  background:#071019!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 18px 48px rgba(0,0,0,.24)!important;
}
#section-contact .contact-list-pane,
#section-contact .b2b-comms-list-pane{
  min-height:0;
  border-right:1px solid #27425d!important;
  background:
    linear-gradient(180deg,#0a1824,#071019)!important;
}
#section-contact .contact-search-row,
#section-contact .b2b-comms-search-row{
  gap:7px;
  padding:11px 11px 7px!important;
}
#section-contact .contact-search-row input,
#section-contact .contact-search-row select,
#section-contact .b2b-comms-search-row input,
#section-contact .b2b-comms-search-row select,
#section-contact .b2b-comms-source-filter select,
#section-contact .b2b-reply select{
  min-height:38px;
  border:1px solid #2b4966!important;
  border-radius:7px!important;
  color:#dbe4ec!important;
  background:#091724!important;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.16);
}
#section-contact .contact-search-row input:focus,
#section-contact .contact-search-row select:focus,
#section-contact .b2b-comms-search-row input:focus,
#section-contact .b2b-comms-search-row select:focus,
#section-contact .b2b-comms-source-filter select:focus,
#section-contact .b2b-reply select:focus{
  border-color:#527fa7!important;
  box-shadow:0 0 0 2px rgba(89,137,177,.10)!important;
}
#section-contact .contact-unread-toggle{
  padding:3px 12px 9px;
  color:#73899d;
  font-size:9px;
}
#section-contact .contact-unread-toggle input{
  accent-color:#668fb3;
}
#section-contact .contact-thread-list{
  scrollbar-width:thin;
  scrollbar-color:#29445f #071019;
}
#section-contact .contact-thread-list::-webkit-scrollbar-track{
  background:#071019!important;
}
#section-contact .contact-thread-list::-webkit-scrollbar-thumb{
  background:#29445f!important;
  border-color:#071019!important;
}

#section-contact .contact-thread,
#section-contact .b2b-thread{
  position:relative;
  min-height:68px;
  padding:10px 11px!important;
  border-top:1px solid #183047!important;
  background:transparent!important;
  transition:.14s ease;
}
#section-contact .contact-thread::after,
#section-contact .b2b-thread::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:2px;
  background:transparent;
}
#section-contact .contact-thread:hover,
#section-contact .b2b-thread:hover{
  background:#0e2234!important;
}
#section-contact .contact-thread.active,
#section-contact .b2b-thread.active{
  background:
    linear-gradient(90deg,rgba(29,67,101,.94),rgba(11,29,45,.96))!important;
  box-shadow:inset 3px 0 0 #6b9fc8!important;
}
#section-contact .contact-thread.active::after,
#section-contact .b2b-thread.active::after{
  background:#d48742;
  box-shadow:0 0 10px rgba(212,135,66,.25);
}
#section-contact .contact-avatar,
#section-contact .b2b-thread-avatar{
  border:1px solid #31506c;
  border-radius:10px!important;
  background:#102235!important;
  color:#c4d6e8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#section-contact .contact-thread.active .contact-avatar,
#section-contact .b2b-thread.active .b2b-thread-avatar{
  border-color:#577fa2;
  box-shadow:0 0 14px rgba(92,139,179,.10);
}
#section-contact .contact-thread-main b,
#section-contact .b2b-thread-main b{
  color:#e9eff4;
  font-size:10.5px;
  font-weight:750;
}
#section-contact .contact-thread-main small,
#section-contact .b2b-thread-main small,
#section-contact .contact-thread-preview{
  color:#6f8498!important;
  font-size:8.5px!important;
}
#section-contact .contact-thread-side em,
#section-contact .contact-source-badge,
#section-contact .b2b-thread-side em{
  border:1px solid #2c4a66;
  border-radius:99px!important;
  background:#0f2334!important;
  color:#8da9c2!important;
  font-size:7.5px!important;
}
#section-contact .contact-thread-side strong,
#section-contact .b2b-thread-side strong{
  border:1px solid #4b79a2;
  background:#214c73!important;
  color:#ecf6ff;
  box-shadow:0 0 10px rgba(64,125,178,.14);
}

#section-contact .contact-dialog-pane,
#section-contact .b2b-comms-dialog-pane{
  min-height:0;
  background:
    radial-gradient(circle at 84% 4%,rgba(62,112,165,.08),transparent 30%),
    #071019!important;
}
#section-contact .contact-dialog,
#section-contact .b2b-dialog{
  height:100%;
}
#section-contact .contact-dialog-head,
#section-contact .b2b-dialog-head{
  min-height:70px;
  padding:11px 15px!important;
  border-bottom:1px solid #28445e!important;
  background:
    linear-gradient(180deg,rgba(10,24,36,.96),rgba(8,18,27,.94));
}
#section-contact .contact-person small,
#section-contact .b2b-dialog-head small{
  color:#71889e!important;
}
#section-contact .contact-dialog-empty{
  background:
    radial-gradient(circle at 50% 42%,rgba(57,104,151,.08),transparent 28%),
    #071019;
  color:#70869a;
}
#section-contact .contact-dialog-empty-icon{
  color:#93b6d6;
  text-shadow:0 0 18px rgba(105,161,211,.18);
}
#section-contact .contact-dialog-empty h4{
  color:#dfe8ef;
}
#section-contact .contact-messages{
  gap:10px;
  padding:18px!important;
  background:
    linear-gradient(135deg,rgba(7,16,25,.96),rgba(6,12,19,.98)),
    #071019!important;
}
#section-contact .contact-message{
  max-width:min(74%,760px);
  padding:10px 12px!important;
  border-radius:10px!important;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}
#section-contact .contact-message.incoming{
  border:1px solid #29465f!important;
  background:linear-gradient(145deg,#102235,#0c1a29)!important;
  color:#dce5ec;
}
#section-contact .contact-message.outgoing{
  border:1px solid #4c769e;
  background:
    linear-gradient(135deg,#2b5579,#1b3f60)!important;
  color:#f5f8fa;
}
#section-contact .b2b-message.note{
  border:1px dashed #70523a!important;
  background:#201710!important;
  color:#d9b890;
}
#section-contact .contact-message small{
  color:#8ba0b3;
  opacity:.74!important;
}

#section-contact .contact-reply,
#section-contact .b2b-reply{
  padding:11px!important;
  border-top:1px solid #28445e!important;
  background:
    linear-gradient(180deg,#091724,#071019)!important;
}
#section-contact .contact-reply textarea,
#section-contact .b2b-reply textarea{
  min-height:58px!important;
  border:1px solid #2d4e6c!important;
  border-radius:8px!important;
  color:#e7edf3!important;
  background:#06131f!important;
  box-shadow:inset 0 1px 10px rgba(0,0,0,.18);
}
#section-contact .contact-reply textarea:focus,
#section-contact .b2b-reply textarea:focus{
  border-color:#557fa2!important;
  box-shadow:0 0 0 2px rgba(86,128,165,.10),inset 0 1px 10px rgba(0,0,0,.15)!important;
}
#section-contact .contact-composer-actions .btn,
#section-contact .b2b-reply .btn{
  min-height:38px;
  border-radius:7px!important;
  font-size:9px;
  font-weight:750;
}
#section-contact .contact-composer-actions .btn.primary,
#section-contact .b2b-reply .btn.primary,
#section-contact .b2b-comms-actions .btn.primary{
  border:1px solid #5b85a6;
  background:
    linear-gradient(135deg,#355f83,#234863)!important;
  box-shadow:0 8px 20px rgba(27,60,86,.23)!important;
}
#section-contact .contact-composer-actions .btn.primary:hover,
#section-contact .b2b-reply .btn.primary:hover,
#section-contact .b2b-comms-actions .btn.primary:hover{
  border-color:#7aa5c7;
  background:linear-gradient(135deg,#47779c,#2e5c7b)!important;
}
#section-contact .contact-ai-generate,
#section-contact .contact-ai-plan,
#section-contact .contact-attach-button,
#section-contact .b2b-ai-generate,
#section-contact .b2b-ai-plan{
  border-color:#344f68!important;
  background:#0d1f30!important;
  color:#9cb6ce!important;
}
#section-contact .contact-ai-generate:hover,
#section-contact .contact-ai-plan:hover,
#section-contact .contact-attach-button:hover,
#section-contact .b2b-ai-generate:hover,
#section-contact .b2b-ai-plan:hover{
  border-color:#507797!important;
  color:#e9f2f8!important;
  background:#142c40!important;
}
#section-contact .contact-selected-file,
#section-contact .contact-attachment{
  border-color:#34536e!important;
  border-radius:8px!important;
  background:#0e2030!important;
}
#section-contact .contact-attachment-kind{
  border:1px solid #3b5d79;
  background:#142c41!important;
  color:#aac6df!important;
}

#section-contact .b2b-comms-toolbar{
  flex:0 0 auto;
  min-height:42px;
  margin:0!important;
  padding:0 2px;
}
#section-contact .b2b-comms-toolbar .eyebrow{
  display:block!important;
  color:#738ba3;
  font-size:8px;
  letter-spacing:.13em;
}
#section-contact .b2b-comms-toolbar p{
  color:#708398!important;
  font-size:9px!important;
}
#section-contact .b2b-source-channels{
  flex:0 0 auto;
  gap:6px!important;
  padding:0 0 2px!important;
}
#section-contact .b2b-source-pill{
  min-width:125px!important;
  padding:6px 9px!important;
  border:1px solid #2c4964!important;
  border-radius:7px!important;
  background:#0b1a27!important;
}
#section-contact .b2b-source-pill:hover{
  border-color:#4e7698!important;
  background:#10263a!important;
}
#section-contact .b2b-source-pill span{color:#99afc3;font-size:8px!important}
#section-contact .b2b-source-pill b{color:#dfe7ed;font-size:10px!important}
#section-contact .b2b-summary{
  flex:0 0 auto;
  gap:6px!important;
  margin:0 0 2px!important;
}
#section-contact .b2b-summary span{
  border:1px solid #29435c;
  background:#0b1925!important;
  color:#7f95a8!important;
  font-size:8px!important;
}
#section-contact .b2b-summary .attention{
  border-color:#6d4c32;
  background:#24170f!important;
  color:#d6aa7b!important;
}
#section-contact .b2b-summary .success{
  border-color:#2e5b4a;
  background:#0e211a!important;
  color:#8fd0ad!important;
}
#section-contact .b2b-thread-meta{
  border-bottom:1px solid #28445e!important;
  background:#091724!important;
}
#section-contact .b2b-chip{
  border:1px solid #2d4a64;
  background:#0e2131!important;
  color:#8da6bc!important;
}
#section-contact .b2b-chip.reply{
  border-color:#69443a;
  background:#22140f!important;
  color:#dba18c!important;
}
#section-contact .b2b-chip.interested{
  border-color:#2f5a47;
  background:#0d2019!important;
  color:#8ed3ac!important;
}

@media (max-width:1400px){
  #section-contact .communications-command-hero{
    min-height:92px;
    padding:15px 18px;
  }
  #section-contact .communications-command-copy h3{font-size:27px}
  #section-contact .communications-command-copy p{display:none}
  #section-contact .contact-center,
  #section-contact .b2b-comms{grid-template-columns:340px minmax(0,1fr)}
}
@media (max-width:1000px){
  #section-contact .communications-command-hud .communications-hud-stat{display:none}
  #section-contact .contact-center,
  #section-contact .b2b-comms{grid-template-columns:310px minmax(0,1fr)}
}
@media (max-width:780px){
  body:has(#appView:not(.hidden) #section-contact.active){overflow:auto}
  .main:has(#section-contact.active){
    height:auto;
    min-height:100vh;
    padding:7px!important;
    overflow:visible;
  }
  #section-contact.active{display:block!important}
  #section-contact .communications-command-hero{
    min-height:76px;
    padding:12px 13px;
    border-radius:13px;
    margin-bottom:7px;
  }
  #section-contact .communications-command-copy h3{font-size:21px;margin-top:6px;padding-left:13px}
  #section-contact .communications-command-copy h3::before{height:24px}
  #section-contact .communications-command-kicker{font-size:7px}
  #section-contact .communications-command-hud{display:none}
  #section-contact .communications-tabs{
    overflow-x:auto;
    margin-bottom:7px!important;
    scrollbar-width:none;
  }
  #section-contact .communications-tabs::-webkit-scrollbar{display:none}
  #section-contact .communications-tabs button{
    flex:0 0 auto;
    min-height:38px!important;
    padding:0 11px!important;
  }
  #section-contact #contactMarketplacePane:not(.hidden),
  #section-contact #b2bCommsPane:not(.hidden){
    display:flex!important;
  }
  #section-contact .communications-pane-head{flex-wrap:wrap}
  #section-contact .contact-center,
  #section-contact .b2b-comms{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    border-radius:12px!important;
  }
  #section-contact .contact-list-pane,
  #section-contact .b2b-comms-list-pane{
    height:360px;
    border-right:0!important;
    border-bottom:1px solid #27425d;
  }
  #section-contact .contact-dialog-pane,
  #section-contact .b2b-comms-dialog-pane{
    height:620px;
  }
  #section-contact .contact-message{max-width:88%}
  #section-contact .b2b-comms-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
}


/* === COMMUNICATIONS CONTROL ROW ALIGNMENT FIX 2026-10-11 === */
/* The old compact layout left align-self:center on the tab switcher. In the
   BF5 flex layout that pushed the two mode buttons into the middle of a
   separate row. Keep them aligned with the channel controls instead. */
#section-contact .communications-tabs{
  align-self:flex-start!important;
}

@media (min-width:1181px){
  #section-contact.active{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
    gap:10px 12px;
  }

  #section-contact .communications-command-hero{
    grid-column:1/-1;
    grid-row:1;
  }

  #section-contact > .communications-tabs{
    grid-column:2;
    grid-row:2;
    align-self:center!important;
    justify-self:center;
    margin:0!important;
  }

  #section-contact #contactMarketplacePane:not(.hidden){
    display:contents!important;
  }

  #section-contact #contactMarketplacePane > .communications-pane-head{
    display:contents!important;
  }

  #section-contact #contactChannels{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    align-self:center;
    max-width:100%;
  }

  #section-contact #contactReload{
    grid-column:3;
    grid-row:2;
    justify-self:end;
    align-self:center;
  }

  #section-contact #contactMarketplacePane > .contact-center{
    grid-column:1/-1;
    grid-row:3;
    height:100%!important;
    min-height:0!important;
  }

  #section-contact #b2bCommsPane:not(.hidden){
    grid-column:1/-1;
    grid-row:3;
    min-height:0;
  }
}

@media (min-width:781px) and (max-width:1180px){
  #section-contact > .communications-tabs{
    align-self:flex-start!important;
    margin:0!important;
  }
}


/* === COMMUNICATIONS SINGLE CONTROL ROW 2026-10-11 === */
#section-contact .communications-tabs{
  gap:4px!important;
  padding:3px!important;
  border-radius:8px!important;
}
#section-contact .communications-tabs button{
  min-height:34px!important;
  gap:5px!important;
  padding:0 9px!important;
  border-radius:6px!important;
  font-size:8.5px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}
#section-contact .communications-tab-code{
  display:inline!important;
  min-width:auto!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#718aa2!important;
  font-size:6.5px!important;
  line-height:1!important;
  letter-spacing:.12em!important;
}
#section-contact .communications-tabs button.active .communications-tab-code{
  color:#e6a15d!important;
}
#section-contact #b2bTabUnread:not(:empty){
  min-width:16px!important;
  height:16px!important;
  margin-left:2px!important;
  padding:0 4px!important;
  border-radius:99px!important;
  background:#5c2d18!important;
  color:#ffc997!important;
  font-size:6.5px!important;
}

@media (min-width:1181px){
  #section-contact.active{
    grid-template-columns:max-content max-content minmax(0,1fr) auto!important;
    column-gap:8px!important;
  }

  #section-contact #contactChannels{
    grid-column:1!important;
    grid-row:2!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    width:max-content;
    max-width:none!important;
    overflow:visible!important;
  }

  #section-contact > .communications-tabs{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    align-self:center!important;
    width:max-content!important;
  }

  #section-contact #contactReload{
    grid-column:4!important;
    grid-row:2!important;
    justify-self:end!important;
  }

  #section-contact #contactMarketplacePane > .contact-center{
    grid-column:1/-1!important;
    grid-row:3!important;
  }

  #section-contact details.contact-channel{
    flex:0 0 auto!important;
  }

  #section-contact .contact-channel summary{
    min-height:34px!important;
    padding:4px 8px!important;
    font-size:8.5px!important;
  }

  #section-contact .contact-channel small{
    font-size:8px!important;
  }

  #section-contact .contact-channel .contact-brand-logo{
    width:18px!important;
    height:18px!important;
  }
}

@media (min-width:781px) and (max-width:1180px){
  #section-contact .communications-tabs{
    width:max-content!important;
  }
  #section-contact .communications-tabs button{
    min-height:32px!important;
    padding:0 8px!important;
    font-size:8px!important;
  }
}