#sbMobileSlot{
  margin: 10px 0 18px;
}

/* default (mobile flow) */
.sb-dock{
  position: static;
  width: 100%;
  margin: 0 0 18px;
  z-index: 999;
}

/* desktop forced (JS sets data-sb-state="desktop") */
.sb-dock[data-sb-state="desktop"]{
  position: absolute !important;
  width: 320px !important;
  margin: 0 !important;
  z-index: 999 !important;
}

.shoutbox-panel{
  border:1px solid rgba(138,103,33,.86);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,231,166,.20), rgba(0,0,0,0) 60%),
    linear-gradient(rgba(255,250,242,.78), rgba(241,224,194,.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 14px 28px rgba(0,0,0,.26);
}

.sb-dock[data-sb-state="desktop"] .shoutbox-panel{ height: 100%; }

.shoutbox-panel > h3{
  margin:0;
  height:30px;
  line-height:30px;
  padding-left:10px;
  font-size:12px;
  font-weight:bold;
  letter-spacing:.5px;
  color:#fff6d6;
  background: linear-gradient(rgba(78,54,32,.92), rgba(34,23,14,.98));
  border-bottom:1px solid rgba(0,0,0,.70);
  position:relative;
  text-shadow:0 1px 0 rgba(0,0,0,.70);
}
.shoutbox-panel > h3:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, rgba(138,103,33,.95), rgba(255,231,166,.95), rgba(138,103,33,.95));
  opacity:.9;
}

.shoutbox{
  display:flex;
  flex-direction:column;
  color: #2b1d12;
}

.sb-dock[data-sb-state="desktop"] .shoutbox{
  height: calc(100% - 30px);
}

.shoutbox__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid rgba(138,103,33,.22);
  background: linear-gradient(rgba(255,252,246,.92), rgba(240,220,178,.86));
  font-size:11px;
  color: rgba(75,54,37,.92);
}
.shoutbox__status{ font-weight:900; }

.shoutbox__form{
  display:flex;
  gap:8px;
  padding:10px;
  border-bottom:1px dashed rgba(138,103,33,.24);
  background: rgba(255,250,242,.65);
}

.shoutbox__form input[type="text"]{
  flex:1 1 auto;
  height:26px;
  padding:4px 8px;
  border:1px solid rgba(138,103,33,.28);
  background: rgba(255,250,242,.92);
  color:#2b1d12;
  outline:none;
  border-radius:0;
  font-size:12px;
}

.shoutbox__form button{
  height:26px;
  padding:0 10px;
  border:1px solid rgba(217,180,95,.98);
  background: linear-gradient(#ffe7a6, #d9b45f);
  color:#241a0e;
  font-weight:bold;
  cursor:pointer;
  border-radius:0;
}

.shoutbox__note{
  padding:8px 10px;
  font-size:11px;
  color: rgba(75,54,37,.88);
  background: rgba(255,250,242,.55);
  border-bottom:1px solid rgba(138,103,33,.18);
}

.shoutbox__cta{
  padding:10px;
  background: rgba(255,250,242,.65);
  border-bottom:1px solid rgba(138,103,33,.18);
  font-size:12px;
  color: rgba(75,54,37,.92);
}

.shoutbox__list{
  overflow:auto;
  padding:10px;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,231,166,.34) 0 2px, rgba(0,0,0,0) 3px),
    linear-gradient(rgba(255,250,242,.82), rgba(241,224,194,.74));
}

/* MOBILE: stop “infinite space” */
.sb-dock:not([data-sb-state="desktop"]) .shoutbox__list{
  max-height: 260px;
}

/* DESKTOP: fill remaining height */
.sb-dock[data-sb-state="desktop"] .shoutbox__list{
  flex: 1 1 auto;
}

.shoutbox__empty{ font-size:12px; color: rgba(75,54,37,.75); }

.shoutbox__msg{
  border:1px solid rgba(138,103,33,.22);
  background: rgba(255,250,242,.86);
  margin-bottom:8px;
  padding:7px 8px;
}

.shoutbox__msg-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.shoutbox__user{
  color:#5b3a18;
  font-weight:900;
  margin-right:6px;
}
.shoutbox__text{
  color: rgba(43,29,18,.96);
  word-break:break-word;
}
.shoutbox__time{
  color: rgba(75,54,37,.70);
  font-size:11px;
  white-space:nowrap;
}

/* MOBILE: shoutbox w normalnym flow (pod/na dole), bez prawego docka */
@media (max-width: 991.98px) {
  #sbDock {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
    right: auto !important;
    top: auto !important;
  }
}

/* DESKTOP: shoutbox jako prawa kolumna/dock */
@media (min-width: 992px) {
  #sbDock {
    position: sticky !important; /* albo fixed je�li tak chcesz */
    top: 12px !important;
  }
}