/* ==========================================================================
   ATHENA_CONTEXTUAL_MESSAGING_V100_CSS
   ========================================================================== */

:root{
  --acm-navy:#08264f;
  --acm-navy2:#0d315f;

  --acm-gold:#f3c35d;

  --acm-ink:#0a2347;
  --acm-muted:#71819a;

  --acm-line:#dce4ee;
  --acm-soft:#f6f8fb;

  --acm-red:#d9465f;
  --acm-blue:#1769e9;
  --acm-green:#159b72;
  --acm-amber:#d59316;

  --acm-shadow:
    0 16px 40px
    rgba(12,34,62,.18);
}

/* ==========================================================================
   CONTENT-AREA TOP MESSAGING BAR
   ========================================================================== */

.athena-messaging-topbar{
  min-height:52px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:7px 16px;

  background:#fff;

  border-bottom:
    1px
    solid
    var(--acm-line);

  position:relative;

  z-index:25;
}

.athena-messaging-context{
  min-width:0;
}

.athena-messaging-context strong{
  display:block;

  color:var(--acm-ink);

  font-size:14px;
  font-weight:700;

  line-height:1.1;
}

.athena-messaging-context span{
  display:block;

  margin-top:2px;

  color:var(--acm-muted);

  font-size:10px;

  line-height:1.2;
}

.athena-messaging-actions{
  margin-left:auto;

  display:flex;
  align-items:center;

  gap:7px;
}

/* ==========================================================================
   BELL
   ========================================================================== */

.athena-message-bell{
  position:relative;

  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:
    1px
    solid
    #d7e0eb;

  border-radius:10px;

  background:#fff;

  color:#16385e;

  transition:
    background .14s ease,
    border-color .14s ease;
}

.athena-message-bell:hover{
  background:#f5f8fc;

  border-color:#bdcad9;
}

.athena-message-bell svg{
  width:19px;
  height:19px;

  stroke:currentColor;

  fill:none;

  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.athena-message-count{
  position:absolute;

  top:-5px;
  right:-5px;

  min-width:18px;
  height:18px;

  padding:0 4px;

  display:none;
  place-items:center;

  border:
    2px
    solid
    #fff;

  border-radius:999px;

  background:
    var(--acm-red);

  color:#fff;

  font-size:9px;
  font-weight:800;

  line-height:1;
}

.athena-message-count.visible{
  display:grid;
}

/* ==========================================================================
   OVERLAY
   ========================================================================== */

.athena-notification-overlay{
  position:fixed;

  inset:0;

  z-index:998;

  display:none;

  background:
    rgba(5,19,38,.18);
}

.athena-notification-overlay.open{
  display:block;
}

/* ==========================================================================
   DRAWER
   ========================================================================== */

.athena-notification-drawer{
  position:fixed;

  top:0;
  right:0;
  bottom:0;

  width:min(420px,92vw);

  z-index:999;

  display:flex;
  flex-direction:column;

  background:#fff;

  border-left:
    1px
    solid
    var(--acm-line);

  box-shadow:
    var(--acm-shadow);

  transform:
    translateX(102%);

  transition:
    transform .2s ease;
}

.athena-notification-drawer.open{
  transform:
    translateX(0);
}

/* ==========================================================================
   DRAWER HEADER
   ========================================================================== */

.athena-notification-head{
  min-height:68px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:14px 17px;

  border-bottom:
    1px
    solid
    var(--acm-line);
}

.athena-notification-head-copy{
  min-width:0;
}

.athena-notification-head-copy strong{
  display:block;

  color:var(--acm-ink);

  font-size:18px;

  line-height:1.1;
}

.athena-notification-head-copy span{
  display:block;

  margin-top:3px;

  color:var(--acm-muted);

  font-size:10px;
}

.athena-notification-close{
  width:33px;
  height:33px;

  display:grid;
  place-items:center;

  border:0;

  border-radius:8px;

  background:
    #f5f7fa;

  color:
    #294766;

  font-size:18px;
}

.athena-notification-close:hover{
  background:
    #eaf0f6;
}

/* ==========================================================================
   TABS
   ========================================================================== */

.athena-notification-tabs{
  display:flex;

  gap:3px;

  padding:9px 12px;

  border-bottom:
    1px
    solid
    var(--acm-line);

  overflow-x:auto;
}

.athena-notification-tab{
  flex:1;

  min-width:72px;

  border:0;

  border-radius:7px;

  background:
    transparent;

  color:
    #657891;

  padding:
    7px
    8px;

  font-size:10px;
  font-weight:700;
}

.athena-notification-tab:hover{
  background:
    #f3f6fa;
}

.athena-notification-tab.active{
  background:
    #edf4ff;

  color:
    #145fc8;
}

/* ==========================================================================
   LIST
   ========================================================================== */

.athena-notification-list{
  flex:1 1 auto;

  overflow-y:auto;

  padding:
    4px
    12px
    16px;

  scrollbar-width:thin;
}

.athena-notification-item{
  position:relative;

  display:grid;

  grid-template-columns:
    30px
    minmax(0,1fr)
    auto;

  gap:9px;

  padding:
    13px
    5px;

  border-bottom:
    1px
    solid
    #e8edf3;
}

.athena-notification-item.unread{
  background:
    linear-gradient(
      90deg,
      rgba(23,105,233,.035),
      transparent
    );
}

.athena-notification-symbol{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:#eef4ff;

  color:#1767d1;

  font-size:12px;
  font-weight:800;
}

.athena-notification-symbol.type-alert{
  background:#fff1f3;
  color:#c93b50;
}

.athena-notification-symbol.type-action{
  background:#fff6df;
  color:#9a6810;
}

.athena-notification-symbol.type-update{
  background:#eaf8f2;
  color:#087d5a;
}

.athena-notification-symbol.type-system{
  background:#f1f3f7;
  color:#50637d;
}

.athena-notification-copy{
  min-width:0;
}

.athena-notification-copy strong{
  display:block;

  color:
    #173555;

  font-size:11px;

  line-height:1.3;
}

.athena-notification-copy p{
  margin:
    3px
    0
    0;

  color:
    #71829a;

  font-size:9.5px;

  line-height:1.4;
}

.athena-notification-copy time{
  display:block;

  margin-top:5px;

  color:
    #94a0b0;

  font-size:8.5px;
}

.athena-notification-arrow{
  align-self:center;

  color:#7590ad;

  font-size:17px;
}

/* ==========================================================================
   EMPTY
   ========================================================================== */

.athena-notification-empty{
  min-height:260px;

  display:grid;
  place-items:center;

  padding:25px;

  text-align:center;

  color:#778aa3;
}

.athena-notification-empty strong{
  display:block;

  margin-bottom:4px;

  color:#18395f;

  font-size:13px;
}

.athena-notification-empty span{
  display:block;

  font-size:10px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.athena-notification-footer{
  flex:0 0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  padding:
    11px
    13px;

  border-top:
    1px
    solid
    var(--acm-line);

  background:
    #fbfcfe;
}

.athena-notification-footer button{
  min-height:33px;

  border:
    1px
    solid
    #cad6e3;

  border-radius:8px;

  background:#fff;

  color:#2a4c70;

  padding:
    6px
    10px;

  font-size:9.5px;
  font-weight:700;
}

.athena-notification-footer button:hover{
  background:
    #f2f6fa;
}

.athena-notification-footer .primary{
  border-color:
    #0d5fc9;

  background:
    var(--acm-navy);

  color:#fff;
}

/* ==========================================================================
   OLD SIDEBAR BADGES
   ========================================================================== */

/*
  Messaging does not belong in navigation.

  We only hide explicit notification/message badge signatures.
  Product-specific functional badges without those signatures remain untouched.
*/

[data-message-count],
[data-notification-count],
.athena-message-sidebar-badge,
.athena-notification-sidebar-badge{
  display:none !important;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:720px){

  .athena-messaging-topbar{
    min-height:49px;

    padding:
      6px
      10px;
  }

  .athena-messaging-context span{
    display:none;
  }

  .athena-message-bell{
    width:36px;
    height:36px;
  }

}