/* ==========================================================================
   SMLK-branded notifications for the Elastic skin
   Pixel-matches smlk.hu's own .form-status component (same padding, radius,
   font-size and the exact two color tokens the site already uses) — Roundcube's
   default alert chrome (prepended icon, flex layout, reduced opacity) is
   stripped rather than recolored.
   Applies everywhere via includes/layout.html, since #messagestack is shared
   across every Roundcube template.
   ========================================================================== */

:root {
  --smlk-blue-light: #7ba4ff;
  --smlk-green: #4fd08a;
  --smlk-radius-sm: 6px;
  --smlk-font-body: 'Inter', 'Segoe UI', sans-serif;
}

#messagestack {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  left: auto !important;
  width: 320px !important;
  max-width: calc(100vw - 40px);
  z-index: 100000 !important;
}

#messagestack div {
  display: flex !important;
  align-items: center;
  gap: 10px;
  opacity: 1 !important;
  margin: 0 0 10px;
  padding: 12px 16px;
  border-radius: var(--smlk-radius-sm);
  font-family: var(--smlk-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
  /* Solid surface (not a translucent tint) so it stays legible regardless
     of what's behind it — only the left accent bar and icon/text carry the
     semantic color now. */
  background: #171c28;
  color: var(--smlk-blue-light);
  border: 1px solid rgba(47, 111, 237, 0.35);
  border-left: 4px solid var(--smlk-blue-light);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
}
#messagestack div:last-child {
  margin-bottom: 0;
}

/* Drop Roundcube's default prepended alert icon entirely */
#messagestack div > i.icon {
  display: none !important;
}

/* Custom icon, drawn as a masked shape filled with the message's own text
   color — same technique as the login field icons, not Roundcube's font-icon. */
#messagestack div::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
#messagestack div span.content,
#messagestack div > span {
  flex: 1;
}

/* info / notice (default) */
#messagestack div::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='0.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='0.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* success / confirmation */
#messagestack div.alert-success::before,
#messagestack div.boxconfirmation::before,
#messagestack div.confirmation::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.6 2.6L16 9.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.6 2.6L16 9.3'/%3E%3C/svg%3E");
}

/* warning */
#messagestack div.alert-warning::before,
#messagestack div.boxwarning::before,
#messagestack div.warning::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4L2.5 20h19L12 4z'/%3E%3Cline x1='12' y1='10' x2='12' y2='14.5'/%3E%3Ccircle cx='12' cy='17.3' r='0.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4L2.5 20h19L12 4z'/%3E%3Cline x1='12' y1='10' x2='12' y2='14.5'/%3E%3Ccircle cx='12' cy='17.3' r='0.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* error / danger */
#messagestack div.alert-danger::before,
#messagestack div.boxerror::before,
#messagestack div.error::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.3' r='0.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.3' r='0.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* loading — spinning ring instead of a static glyph */
#messagestack div.loading::before {
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  border: 2px solid rgba(123, 164, 255, 0.35);
  border-top-color: var(--smlk-blue-light);
  border-radius: 50%;
  box-sizing: border-box;
  animation: smlk-spin 0.7s linear infinite;
}
@keyframes smlk-spin {
  to { transform: rotate(360deg); }
}

#messagestack div.alert-danger,
#messagestack div.alert-warning,
#messagestack div.boxerror,
#messagestack div.boxwarning,
#messagestack div.error,
#messagestack div.warning {
  color: #f5b2b2;
  border-color: rgba(224, 76, 76, 0.35);
  border-left-color: #f5b2b2;
}

/* success / confirmation gets its own green — previously reused blue, which
   read as a blue/green clash against other success indicators in the app. */
#messagestack div.alert-success,
#messagestack div.boxconfirmation,
#messagestack div.confirmation {
  color: var(--smlk-green);
  border-color: rgba(61, 191, 122, 0.35);
  border-left-color: var(--smlk-green);
}

#messagestack div a:not(.btn) {
  color: inherit;
  text-decoration: underline;
}

#messagestack div .btn {
  display: inline-block;
  margin-left: 8px;
  padding: 6px 14px;
  border: none;
  border-radius: var(--smlk-radius-sm);
  background: #2f6fed;
  color: #ffffff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
#messagestack div .btn:hover {
  background: #1d54c4;
}

@media screen and (max-width: 480px) {
  #messagestack {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none;
  }
}