/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 390:0 Unexpected "<"

**/
<style>
/* ===========================
   GLOBAL WRAPPER ALIGNMENT FIXED
=========================== */
.gossip-wrap,
.gossip-feed,
.gossip-input-area,
#gossipContent {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 20px;
}

/* ===========================
   TITLE + SUBTEXT
=========================== */
.gossip-title {
  text-align:center;
  font-size:2.4rem;
  font-weight:800;
  margin-bottom:8px;
}
.gossip-sub {
  text-align:center;
  font-size:1.1rem;
  color:#555;
  max-width:580px;
  margin:0 auto 30px;
}

/* ===========================
   GOSSIP FEED
=========================== */
.gossip-feed {
  display:flex;
  flex-direction:column;
  gap:26px;
  margin-bottom:40px;
}

.gossip-item {
  width:100%;
  display:flex;
  flex-direction:column;
}

.gossip-user {
  font-size:0.9rem;
  font-weight:600;
  color:#6b6b6f;
  margin-bottom:6px;
  text-align:left;
  padding-left:4px;
}

/* ===========================
   BUBBLE STYLE (CENTERED)
=========================== */
.gossip-bubble {
  background: linear-gradient(135deg, #fff3ff 0%, #ffe6ff 100%);
  border-radius: 22px;
  padding: 16px 20px;
  max-width: 100%;
  width: fit-content;
  line-height:1.5rem;
  font-size:1.05rem;
  box-shadow:0 6px 14px rgba(0,0,0,0.06);
  position:relative;
  margin-left:0;
}

.gossip-item:nth-child(even) .gossip-bubble {
  background: linear-gradient(135deg, #e7f6ff 0%, #d9f1ff 100%);
}

.gossip-bubble:after {
  content:"";
  position:absolute;
  left:16px;
  bottom:-8px;
  width:16px;
  height:16px;
  background:inherit;
  border-radius:4px;
  transform:rotate(45deg);
}

.gossip-time {
  font-size:0.75rem;
  color:#8a8a8a;
  margin-top:6px;
  padding-left:4px;
}

/* ===========================
   INPUT AREA (CENTERED)
=========================== */
.gossip-input-area {
  background:white;
  padding:22px;
  border-radius:22px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:40px;
}

#gossipMessage {
  width:100%;
  min-height:130px;
  padding:16px;
  border:1px solid #d9d9e6;
  border-radius:16px;
  resize:vertical;
  font-size:1rem;
}

.gossip-button {
  background:#111;
  color:#fff;
  padding:12px 0;
  font-weight:600;
  border-radius:12px;
  cursor:pointer;
  transition:0.2s;
  width:100%;
}
.gossip-button:hover { opacity:0.85; }

/* ===========================
   DISCLAIMER POPUP
=========================== */
.gossip-overlay {
  position: fixed; 
  top: 0; left: 0;
  width:100%; height:100%;
  backdrop-filter: blur(12px);
  background: rgba(255,240,248,0.55);
  display:flex; 
  justify-content:center; 
  align-items:center;
  z-index: 99999;
  animation: fadeIn 0.35s ease-out;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.gossip-modal {
  background: linear-gradient(165deg,#fff8fb,#ffeef7,#fff);
  padding:34px 28px;
  width:90%; 
  max-width:460px;
  border-radius:32px;
  box-shadow:0 12px 40px rgba(0,0,0,0.12);
  animation: popCute 0.4s cubic-bezier(.16,.8,.44,1);
  border:2px solid #ffe2ef;
}
@keyframes popCute { 0%{transform:scale(0.75);opacity:0} 100%{transform:scale(1);opacity:1} }

.gossip-modal-title {
  font-size:1.9rem;
  font-weight:800;
  text-align:center;
  margin-bottom:16px;
  color:#d8488b;
  letter-spacing:-0.5px;
}
.gossip-modal-title::after { content: " ✨"; }

.gossip-modal-text {
  font-size:1.05rem;
  color:#444;
  text-align:center;
  margin-bottom:12px;
  line-height:1.5;
}

.gossip-modal-list { 
  margin:16px 0 24px; 
  padding-left:0; 
  list-style:none;
}

.gossip-modal-list li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding: 10px 14px;
  border-radius:14px;
  margin-bottom:10px;
  border:1px solid #ffd6e8;
  font-size:0.95rem;
  color:#333;
  background:#fff;
  box-shadow:0 2px 5px rgba(255,197,223,0.35);
}

.rule-icon {
  font-size:1.15rem;
  min-width:28px;
  display:flex;
  justify-content:center;
  margin-top:2px;
}

.rule-text { display:block; line-height:1.45; }
.rule-text.no-break { white-space: nowrap; }

.gossip-modal-btn {
  background: linear-gradient(135deg,#ff8fb2,#ff6f98);
  color:#fff;
  width:100%;
  padding:14px;
  font-size:1.2rem;
  font-weight:700;
  border-radius:18px;
  cursor:pointer;
  border:none;
  box-shadow:0 4px 12px rgba(255,119,161,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gossip-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,119,161,0.45);
}
.gossip-modal-btn::after { content: " 💖"; }

.hidden { display:none !important; }
/* --- FINAL MOBILE WRAP + SPACING FIX FOR DISCLAIMER RULES --- */
.gossip-modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gossip-modal-list li {
  display: block !important;
  word-break: break-word !important;
  white-space: normal !important;
  font-size: 0.97rem;
  padding: 10px 8px;
  border-radius: 8px;
  margin-bottom: 0 !important;
  line-height: 1.45 !important;
}

.gossip-modal-list li * {
  white-space: normal !important;
  word-break: break-word !important;
  display: inline !important;
  line-height: inherit !important;
}

/* Remove any no-break hack for mobile */
.gossip-modal-list li .no-break {
  white-space: normal !important;
}

/* FORCE WRAP FOR MOBILE */
@media (max-width: 767px) {
  .gossip-modal-list li {
    font-size: 0.96rem !important;
    padding: 8px 4px !important;
    line-height: 1.45 !important;
  }
  .gossip-modal-list li strong,
  .gossip-modal-list li span {
    white-space: normal !important;
    font-weight: bold;
    line-height: inherit !important;
  }
}
.gossip-reactions {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
  position: relative;
}

.gossip-reaction-btn {
  background: none;
  border: none;
  font-size: 1.7rem;
  margin: 0 1px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.13s;
  outline: none;
}

.gossip-reaction-btn:active {
  transform: scale(1.25);
}

.gossip-reaction-btn .reaction-count {
  font-size: 1.06rem;
  color: #d8488b;
  margin-left: 3px;
  vertical-align: middle;
  font-weight: 700;
  padding-left: 2px;
}

/* Popup styling */
.emoji-popup {
  position: absolute !important;
  z-index: 1002;
  background: #fff0fb;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(239, 58, 182, 0.16);
  padding: 13px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  top: 40px; /* or set dynamically for mobile */
  left: 0;
}
.gossip-input-area {
  position: sticky;
  bottom: 0;
  z-index: 15;
  background: white;
  /* Optionally add a border or subtle shadow for separation: */
  box-shadow: 0 -4px 24px rgba(216,72,139,0.07);
}

@supports (position: sticky) {
  .gossip-input-area {
    /* For full-width sticky experience on mobile */
    left: 0;
    right: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
.gossip-upvote-btn {
  transition: background 0.13s, color 0.13s;
  outline: none;
}
.gossip-upvote-btn:active {
  background: #dde2f9;
}
.gossip-upvote-btn[disabled] {
  background: #f2f4ff !important;
  color: #bbb !important;
  cursor: not-allowed !important;
}
.gossip-upvote-btn .arrow {
  color: #d8488b;
  font-weight: bold;
}
.gossip-sort-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  align-items: center;
}

.gossip-sort-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #666666;
  font-size: 0.9rem;
  line-height: 1;
}

.gossip-sort-btn:hover {
  background: #f7f7ff;
}

.gossip-sort-btn.active {
  background: #f2f4ff;
  color: #111111;
  font-weight: 600;
}

</style>