/* ============================================================
   Friday Teams Chat Hub — ftch-style.css  v1.2
   ============================================================ */

/* ----------------------------------------------------------
   Our own hidden utility (avoids Tailwind !important conflict)
---------------------------------------------------------- */
.ftch-hidden { display: none !important; }

/* ----------------------------------------------------------
   Spinner
---------------------------------------------------------- */
@keyframes ftch-spin { to { transform: rotate(360deg); } }
.ftch-spinner {
    animation: ftch-spin 0.75s linear infinite;
    border-radius: 50%;
}

/* ----------------------------------------------------------
   Message entrance animation
---------------------------------------------------------- */
@keyframes ftch-msg-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ftch-msg-anim {
    animation: ftch-msg-in 0.2s ease-out both;
}

/* ----------------------------------------------------------
   Message hover actions — show on group hover
---------------------------------------------------------- */
.group:hover .ftch-msg-actions {
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   Active nav button
---------------------------------------------------------- */
.active-nav {
    background: linear-gradient(135deg, #EFF6FF, #DBEAFE) !important;
    color: #2563EB !important;
    font-weight: 700;
}
.dark .active-nav {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #93C5FD !important;
}

/* ----------------------------------------------------------
   Scrollbar (chat area)
---------------------------------------------------------- */
#ftch-messages-area::-webkit-scrollbar        { width: 5px; }
#ftch-messages-area::-webkit-scrollbar-track  { background: transparent; }
#ftch-messages-area::-webkit-scrollbar-thumb  { background: #CBD5E1; border-radius: 3px; }
.dark #ftch-messages-area::-webkit-scrollbar-thumb { background: #4B5563; }

/* ----------------------------------------------------------
   Pinned bar flex fix
   (Tailwind 'hidden' removes display; use 'ftch-hidden' then
    JS adds ftch-flex to show it as flex)
---------------------------------------------------------- */
#ftch-pinned-bar {
    display: none; /* default hidden; JS will set display:flex */
}

/* ----------------------------------------------------------
   Reply bar flex fix
---------------------------------------------------------- */
#ftch-reply-bar {
    display: none;
}

/* ----------------------------------------------------------
   Media preview flex fix
---------------------------------------------------------- */
#ftch-media-preview {
    display: none;
}

/* ----------------------------------------------------------
   Notification badge pulse
---------------------------------------------------------- */
@keyframes ftch-badge-pulse {
    0%,100% { transform: scale(1);    }
    50%      { transform: scale(1.2); }
}
#ftch-unread-badge,
#ftch-notif-badge {
    animation: ftch-badge-pulse 1.8s ease-in-out infinite;
}

/* ----------------------------------------------------------
   Leaderboard period button active state
---------------------------------------------------------- */
.ftch-lb-period.active {
    background: #3B82F6;
    color: #fff;
}

/* ----------------------------------------------------------
   Registration team card checked state
---------------------------------------------------------- */
input[type="radio"].sr-only:checked + div {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* ----------------------------------------------------------
   Notification line-clamp
---------------------------------------------------------- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------
   Mobile responsive sidebar
---------------------------------------------------------- */
@media (max-width: 767px) {
    #ftch-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 40;
        transform: translateX(0);
        transition: transform 0.25s ease;
        width: 270px !important;
    }
    #ftch-sidebar.ftch-hidden {
        display: flex !important; /* keep in DOM */
        transform: translateX(-100%) !important;
    }
}

/* ----------------------------------------------------------
   Ensure emoji picker grid
---------------------------------------------------------- */
#ftch-emoji-picker .grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
}

/* ----------------------------------------------------------
   Context menu & reaction picker backdrop fix
---------------------------------------------------------- */
#ftch-context-menu,
#ftch-reaction-picker {
    z-index: 9999;
}

/* ----------------------------------------------------------
   Bubble max-width clamp for very small screens
---------------------------------------------------------- */
@media (max-width: 480px) {
    .ftch-bubble {
        max-width: calc(100vw - 100px);
    }
}