/* ===== Tambayan + Chichat custom styles (plain CSS, works alongside Tailwind) ===== */

* { -webkit-tap-highlight-color: transparent; }

/* Scrollbars */
.thin-scroll::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: rgba(120, 110, 150, .3); border-radius: 99px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll { scrollbar-width: thin; scrollbar-color: rgba(120,110,150,.3) transparent; }

/* Entry animations */
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.post-in, .comment-in { animation: popIn .25s ease-out both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-new { animation: msgIn .2s ease-out both; }

/* Reaction picker */
.react-picker {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px;
  background: #fff; box-shadow: 0 10px 30px rgba(30, 20, 60, .18), 0 0 0 1px rgba(0,0,0,.04);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.9); transform-origin: bottom left;
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.dark .react-picker { background: #2a2536; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }
.react-wrap:hover .react-picker, .react-wrap.open .react-picker {
  opacity: 1; visibility: visible; transform: none; transition-delay: .35s, .35s, 0s;
}
.react-picker button { font-size: 28px; line-height: 1; width: 40px; height: 40px; border-radius: 999px; transition: transform .15s; }
.react-picker button:hover { transform: translateY(-6px) scale(1.3); }

/* Toasts */
.toast { animation: popIn .2s ease-out both; pointer-events: auto; }
.toast-out { opacity: 0; transform: translateY(8px); transition: all .25s; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(8, 6, 14, .92); display: grid; place-items: center; padding: 24px; animation: popIn .15s ease-out; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* Emoji popover */
.emoji-pop { position: fixed; z-index: 250; width: 300px; padding: 10px; border-radius: 16px; background: #fff;
  box-shadow: 0 16px 40px rgba(30,20,60,.2), 0 0 0 1px rgba(0,0,0,.05); display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; animation: popIn .15s ease-out; }
.dark .emoji-pop { background: #24202f; box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }
.emoji-pop button { font-size: 22px; height: 34px; border-radius: 8px; }
.emoji-pop button:hover { background: rgba(124, 69, 255, .12); }

/* Online dot */
.online-dot { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 99px; background: #10b981; border: 3px solid #fff; }
.dark .online-dot { border-color: #17141f; }

/* ================= Chichat ================= */
#chichat:not(.has-chat) #ccInfo { display: none !important; }
#chichat.chat-open #ccList { display: none; }
#chichat.chat-open #ccChat { display: flex; }
@media (min-width: 768px) { #chichat.chat-open #ccList { display: flex; } }
@media (min-width: 1280px) { #chichat.info-closed #ccInfo { display: none; } }
@media (max-width: 1279px) {
  #chichat.info-open #ccInfo { display: flex; position: fixed; top: 56px; right: 0; bottom: 0; z-index: 40; box-shadow: -20px 0 40px rgba(0,0,0,.2); }
}

/* "Mine" bubbles share one gradient across the viewport, like the big messenger apps */
.bubble-mine { background: linear-gradient(180deg, #b44cff 0%, #7c45ff 45%, #4f46e5 100%) fixed; color: #fff; }
.bubble-theirs { background: #ececf3; }
.dark .bubble-theirs { background: #2a2636; }

.chat-bg {
  background-color: #fff;
  background-image: radial-gradient(rgba(124,69,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
}
.dark .chat-bg { background-color: #14111c; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); }

/* Typing dots */
.typing-dots { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 20px; }
.typing-dots span { width: 7px; height: 7px; border-radius: 99px; background: #9a93ad; animation: blink 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Floating bubbles on the auth screen */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }
.floaty-2 { animation: floaty 6s ease-in-out infinite .8s; }
.floaty-3 { animation: floaty 7s ease-in-out infinite 1.6s; }