/* =========================================================
   BERF Mail — Final immersive UI (v0.1.17)
   No feature changes. Strong overrides because base desk mail
   ships with light styles in the template.
========================================================= */

#berfMailTool,
#berfMailTool *{
  box-sizing:border-box;
}

#berfMailTool{
  --berf-mail-bg:#091019;
  --berf-mail-bg-2:#0d1520;
  --berf-mail-panel:#121c28;
  --berf-mail-panel-2:#182434;
  --berf-mail-line:rgba(132,186,202,.14);
  --berf-mail-line-strong:rgba(132,186,202,.28);
  --berf-mail-text:#dfe9ef;
  --berf-mail-muted:#8fa2b3;
  --berf-mail-accent:#84baca;
  --berf-mail-alert:#cb3000;
  --berf-mail-shadow:0 18px 42px rgba(0,0,0,.42);
  color:var(--berf-mail-text) !important;
  font-family:"Roboto Mono","Segoe UI",Arial,sans-serif !important;
}

/* --- Main frame -------------------------------------------------- */

#berfMailTool .inbox-container{
  position:relative !important;
  background:
    radial-gradient(820px 260px at 100% 0%, rgba(132,186,202,.10), transparent 70%),
    linear-gradient(180deg, var(--berf-mail-bg-2), var(--berf-mail-bg)) !important;
  border:1px solid var(--berf-mail-line) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:var(--berf-mail-shadow) !important;
}

#berfMailTool .inbox-container::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, rgba(132,186,202,.95), rgba(132,186,202,.12));
  pointer-events:none;
  z-index:2;
}

/* --- List column ------------------------------------------------- */

#berfMailTool .email-list{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
    rgba(8,12,18,.58) !important;
  border-right:1px solid var(--berf-mail-line) !important;
  padding:14px !important;
}

#berfMailTool #newMailButton{
  width:100% !important;
  margin:0 0 12px 0 !important;
  padding:11px 13px !important;
  border-radius:12px !important;
  border:1px solid rgba(132,186,202,.30) !important;
  background:
    linear-gradient(180deg, rgba(132,186,202,.18), rgba(132,186,202,.08)) !important;
  color:#edf5f8 !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  box-shadow:0 8px 16px rgba(0,0,0,.18) !important;
}
#berfMailTool #newMailButton:hover{
  transform:translateY(-1px);
  border-color:rgba(132,186,202,.42) !important;
  background:
    linear-gradient(180deg, rgba(132,186,202,.24), rgba(132,186,202,.12)) !important;
}

#berfMailTool .email-item{
  position:relative !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    var(--berf-mail-panel) !important;
  border:1px solid var(--berf-mail-line) !important;
  border-radius:16px !important;
  padding:13px 14px !important;
  margin-bottom:10px !important;
  color:var(--berf-mail-text) !important;
  box-shadow:0 10px 20px rgba(0,0,0,.16) !important;
  transition:transform .08s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
#berfMailTool .email-item:hover{
  transform:translateY(-1px);
  border-color:var(--berf-mail-line-strong) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    var(--berf-mail-panel-2) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.22) !important;
}
#berfMailTool .email-item.unread{
  border-left:4px solid var(--berf-mail-accent) !important;
  padding-left:11px !important;
  font-weight:700 !important;
}
#berfMailTool .email-item.active{
  border-color:rgba(132,186,202,.38) !important;
  background:
    linear-gradient(180deg, rgba(132,186,202,.18), rgba(132,186,202,.06)),
    var(--berf-mail-panel-2) !important;
  box-shadow:
    0 0 0 1px rgba(132,186,202,.10) inset,
    0 12px 24px rgba(0,0,0,.22) !important;
}

#berfMailTool .email-item .sender,
#berfMailTool .email-item .email-sender,
#berfMailTool .email-item .sender-name{
  color:#eef5f8 !important;
  font-weight:700 !important;
}

#berfMailTool .email-item .subject,
#berfMailTool .email-item .email-subject,
#berfMailTool .email-item .email-info .subject{
  color:var(--berf-mail-text) !important;
  opacity:1 !important;
}

#berfMailTool .email-item .date,
#berfMailTool .email-item .email-date{
  color:var(--berf-mail-muted) !important;
  font-size:12px !important;
}

#berfMailTool .email-item .new-indicator{
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:var(--berf-mail-accent) !important;
  box-shadow:0 0 10px rgba(132,186,202,.45) !important;
}

/* --- Reading pane ------------------------------------------------ */

#berfMailTool .email-details{
  background:
    radial-gradient(560px 240px at 100% 0%, rgba(132,186,202,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.005)) !important;
  color:var(--berf-mail-text) !important;
  padding:18px 20px !important;
}

#berfMailTool .details-header{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  margin-bottom:12px !important;
}

#berfMailTool .details-avatar,
#berfMailTool #details-avatar,
#berfMailTool .avatar{
  flex:0 0 auto !important;
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg, rgba(203,48,0,.96), rgba(170,35,0,.96)) !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:26px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 10px 18px rgba(0,0,0,.20) !important;
}

#berfMailTool .details-subject,
#berfMailTool #email-subject{
  margin:0 0 8px 0 !important;
  font-size:22px !important;
  line-height:1.25 !important;
  color:#eef5f8 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.20) !important;
}

#berfMailTool .sender-info{
  margin:0 0 12px 0 !important;
  font-size:12px !important;
  color:var(--berf-mail-muted) !important;
  letter-spacing:.01em !important;
}

#berfMailTool #sender-name{
  color:var(--berf-mail-text) !important;
  font-weight:700 !important;
}
#berfMailTool #sender-email{
  color:#aab9c8 !important;
}

/* This is the main white/grey culprit in the base desk CSS */
#berfMailTool .message-body{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005)),
    rgba(0,0,0,.26) !important;
  color:var(--berf-mail-text) !important;
  border:1px solid var(--berf-mail-line) !important;
  border-radius:14px !important;
  padding:14px 15px !important;
  line-height:1.7 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* Safety: if the base tool uses a textarea */
#berfMailTool textarea#message,
#berfMailTool textarea#replyMessage,
#berfMailTool .email-details textarea{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005)),
    rgba(0,0,0,.26) !important;
  color:var(--berf-mail-text) !important;
  border:1px solid var(--berf-mail-line) !important;
  border-radius:14px !important;
  padding:14px 15px !important;
  line-height:1.7 !important;
}

/* --- Attachments ------------------------------------------------- */

#berfMailTool .attachments{
  margin-top:16px !important;
}
#berfMailTool .attachments p{
  margin:0 0 8px 0 !important;
  color:var(--berf-mail-muted) !important;
  font-size:12px !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}

#berfMailTool .attachment-element{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 13px !important;
  border-radius:14px !important;
  border:1px solid var(--berf-mail-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(10,14,20,.65) !important;
  margin-top:8px !important;
  color:var(--berf-mail-text) !important;
  transition:transform .08s ease, border-color .15s ease, background .15s ease;
}
#berfMailTool .attachment-element:hover{
  transform:translateY(-1px);
  border-color:var(--berf-mail-line-strong) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(14,18,26,.8) !important;
}

#berfMailTool .attachment-icon{
  width:36px !important;
  height:36px !important;
  border-radius:11px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(132,186,202,.12) !important;
  border:1px solid rgba(132,186,202,.18) !important;
  color:#e9f3f6 !important;
}

/* --- Buttons ----------------------------------------------------- */

#berfMailTool #replyButton{
  margin-top:16px !important;
  padding:10px 13px !important;
  border-radius:12px !important;
  border:1px solid var(--berf-mail-line) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important;
  color:var(--berf-mail-text) !important;
}
#berfMailTool #replyButton:hover{
  transform:translateY(-1px);
  border-color:var(--berf-mail-line-strong) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
}

/* No search / no old helper UI */
#berfMailTool .berf-mail-searchbar{ display:none !important; }
#berfMailTool .berf-hidden{ display:none !important; }