/* Basic overrides and utility classes if Tailwind misses something */
body {
    margin: 0;
    padding: 0;
}

/* Hide scrollbar while keeping scroll (used for the dashboard sidebar). */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---- Global toast notifications ----
   Self-contained positioning so a toast is NEVER clipped at the screen edge.
   We don't rely on Tailwind utilities here because the CDN (JIT) build can
   race when classes are added to nodes created dynamically by JS, which left
   toasts partially off-screen. Real CSS in a linked stylesheet is applied
   immediately and deterministically. */
#toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    left: auto;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 24rem;                      /* desktop width */
    max-width: calc(100vw - 2rem);     /* always keep a 1rem gutter each side */
    max-height: 100vh;
    overflow: hidden;
    pointer-events: none;              /* never block clicks behind it */
}

.toast-item {
    width: 100%;
    pointer-events: auto;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transform: translateY(0.75rem);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.toast-item.toast-visible {
    transform: translateY(0);
    opacity: 1;
}

.ticket-card {
    transition: all 0.2s ease-in-out;
}
.ticket-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.sla-breached {
    border-left: 4px solid #ef4444; /* red-500 */
}
.sla-warning {
    border-left: 4px solid #f59e0b; /* yellow-500 */
}
.sla-safe {
    border-left: 4px solid #10b981; /* green-500 */
}

/* Line clamp for truncating long descriptions on ticket cards */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Conversation message area smooth scrolling */
#conversation-messages {
    scroll-behavior: smooth;
}

/* Subtle animation for new messages */
#conversation-messages > div {
    animation: fadeInUp 0.25s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Overdue ticket card: subtle pulsing red glow that draws the eye
   without making the entire card red. */
.ticket-overdue {
    animation: overdueGlow 2.4s ease-in-out infinite;
}
@keyframes overdueGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10); }
}

/* Brief flash for newly-arrived tickets */
.animate-pulse-once {
    animation: newTicketFlash 2.2s ease-out 1;
}
@keyframes newTicketFlash {
    0%   { box-shadow: 0 0 0 0 rgba(12, 142, 230, 0.45); }
    50%  { box-shadow: 0 0 0 8px rgba(12, 142, 230, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(12, 142, 230, 0); }
}

/* Wiggle on reminder events so an overdue card jumps */
.shake-once {
    animation: shake 0.65s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* WhatsApp-style red unread badge: pop when count changes */
.animate-badge-pop {
    animation: badgePop 0.32s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes badgePop {
    0%   { transform: scale(0.6); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}