/* Base Setup */
html {
    min-height: 100%;
    /* Fixes the bright background when scrolling beyond content in LIGHT mode */
    background-color: #ecfccb; /* Matches the lime-100 gradient start */
}

/* DARK MODE ROOT FIXES */
html.dark {
    /* Fixes the bright background when scrolling beyond content in DARK mode */
    background-color: #0f172a; /* Matches slate-900 */
    color-scheme: dark;        /* Helps with scrollbar colors and system UI */
}

body { 
    font-family: 'Inter', system-ui, sans-serif; 
    min-height: 100vh;
}

/* Spinner */
.loading-spinner::after {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 6px;
    border: 2px solid #e5e7eb; border-top-color: #6366f1; border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Table Overflow Fix for Mobile */
#pched-live-view {
    overflow-x: auto; /* Allows horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Better scrolling performance on iOS */
}

/* Table */
#pched-live-view table { 
    /* The table itself should now have enough space for all columns */
    width: 100%; 
    min-width: 800px; /* Optional: Sets a minimum width to ensure all columns fit, forcing scroll */
    border-collapse: separate; 
    border-spacing: 0 10px; 
}

/* Header Styling */
#pched-live-view thead th {
    position: sticky; top: 0; 
    background: #f8fafc; 
    padding: 14px 16px; font-size: 0.8rem; text-transform: uppercase; color: #64748b;
    letter-spacing: 0.05em; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-bottom: 1px solid #e2e8f0; 
}

#pched-live-view tbody tr {
    background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.07);
    transition: all 0.2s;
}
#pched-live-view tbody tr:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(0,0,0,0.12); }
#pched-live-view tbody td { padding: 16px; color: #1f2937; }

/* Dark mode overrides */
.dark #pched-live-view thead th { 
    background: #1e293b; 
    color: #cbd5e1; 
    border-bottom: 1px solid #374151; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.dark #pched-live-view tbody tr { background: #1e293b; }
.dark #pched-live-view tbody tr:hover { background: #334155; }
.dark #pched-live-view tbody td { color: #e2e8f0; }

/* Known & duplicate styling */
.known-server {
    background-color: #dcfce7 !important; border-left: 6px solid #16a34a !important;
}
.dark .known-server { background-color: #14532d !important; border-left-color: #22c55e !important; }

tr.duplicate-pubkey-row {
    background-color: #fee2e2 !important; border-left: 5px solid #dc2626 !important;
}
.dark tr.duplicate-pubkey-row { background-color: #7f1d1d !important; border-left-color: #ef4444 !important; }
.dark tr.duplicate-pubkey-row:hover { background-color: #991b1b !important; }

.pubkey-duplicate .short-key { color: #dc2626 !important; font-weight: 600; }
.dark .pubkey-duplicate .short-key { color: #fca5a5 !important; }
.warning-icon { color: #dc2626; font-weight: bold; font-size: 1.3em; margin-left: 5px; }
.dark .warning-icon { color: #fca5a5 !important; }

/* Time colors */
.fresh { color: #10b981; font-weight: 600; }
.recent { color: #3b82f6; }
.stale { color: #f59e0b; }
.very-stale { color: #ef4444; font-weight: 600; }

/* Chat Specific Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Markdown Content Styling within Chat Bubbles */
.prose ul { list-style-type: disc; padding-left: 1.5em; margin: 0.5em 0; }
.prose ol { list-style-type: decimal; padding-left: 1.5em; margin: 0.5em 0; }
.prose p { margin-bottom: 0.5em; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: #6366f1; text-decoration: underline; }
.dark .prose a { color: #818cf8; }
.prose strong { font-weight: 700; }
.prose code { background: rgba(0,0,0,0.1); padding: 2px 4px; rounded: 4px; font-family: monospace; font-size: 0.9em; }
.dark .prose code { background: rgba(255,255,255,0.1); }
.prose pre { background: #1e293b; padding: 10px; rounded: 8px; overflow-x: auto; margin: 10px 0; color: #e2e8f0; }

/* Typing indicator dots */
.typing-dot {
    display: inline-block;
    width: 6px; height: 6px;
    margin: 0 2px;
    background-color: currentColor;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}