/* BLACKSAW2081 LAB v2.8.45
   Ramka komunikatów ułożona jak boczne panele.
   Narożniki +30% względem poprzedniej wersji 9-slice.
*/

.phase-toast{
  --bs-corner-w:125px !important;
  --bs-corner-h:107px !important;
  --bs-edge:14px !important;

  width:min(560px,88vw) !important;
  min-height:168px !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Środek ramki — dokładnie pod narożnikami, bez wystających prostokątów. */
.phase-toast > .blacksaw-frame-content{
  min-height:168px !important;
  padding:40px 132px 46px !important;
  background:
    linear-gradient(180deg,rgba(8,8,10,.22),rgba(3,4,6,.48)),
    url('../images/ui/frame_background.png') center/cover no-repeat !important;
  overflow:hidden !important;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.50),
    0 14px 30px rgba(0,0,0,.44) !important;
}

/* Narożniki jak w panelach: duże, symetryczne i równo dosunięte. */
.phase-toast > .blacksaw-frame-corner{
  width:var(--bs-corner-w) !important;
  height:var(--bs-corner-h) !important;
  aspect-ratio:auto !important;
  z-index:10 !important;
  opacity:1 !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.90)) !important;
}

.phase-toast > .frame-top-left{
  left:-2px !important;
  top:-2px !important;
  background-position:left top !important;
}
.phase-toast > .frame-top-right{
  right:-2px !important;
  top:-2px !important;
  background-position:right top !important;
}
.phase-toast > .frame-bottom-left{
  left:-2px !important;
  bottom:-2px !important;
  background-position:left bottom !important;
}
.phase-toast > .frame-bottom-right{
  right:-2px !important;
  bottom:-2px !important;
  background-position:right bottom !important;
}

/* Belki 9-slice dopasowane do większych narożników. */
.phase-toast > .bs-nine-edge-top{
  top:5px !important;
  left:113px !important;
  right:113px !important;
  height:14px !important;
}
.phase-toast > .bs-nine-edge-bottom{
  bottom:5px !important;
  left:113px !important;
  right:113px !important;
  height:14px !important;
}
.phase-toast > .bs-nine-edge-left{
  left:5px !important;
  top:96px !important;
  bottom:96px !important;
  width:14px !important;
}
.phase-toast > .bs-nine-edge-right{
  right:5px !important;
  top:96px !important;
  bottom:96px !important;
  width:14px !important;
}

/* Pasek postępu nad dolną belką. */
.phase-toast > .message-progress{
  left:132px !important;
  right:132px !important;
  bottom:25px !important;
  z-index:11 !important;
}

/* Tekst w centrum. */
.phase-toast > .blacksaw-frame-content > strong,
.phase-toast > .blacksaw-frame-content > span,
.phase-toast > .blacksaw-frame-content > small{
  width:100% !important;
  text-align:center !important;
}

@media(max-width:720px){
  .phase-toast{
    --bs-corner-w:98px !important;
    --bs-corner-h:84px !important;
    min-height:150px !important;
  }

  .phase-toast > .blacksaw-frame-content{
    min-height:150px !important;
    padding:34px 104px 42px !important;
  }

  .phase-toast > .bs-nine-edge-top,
  .phase-toast > .bs-nine-edge-bottom{
    left:88px !important;
    right:88px !important;
  }

  .phase-toast > .bs-nine-edge-left,
  .phase-toast > .bs-nine-edge-right{
    top:74px !important;
    bottom:74px !important;
  }

  .phase-toast > .message-progress{
    left:104px !important;
    right:104px !important;
    bottom:22px !important;
  }
}