/**
 * Bitghost Meetings - Spectre AI Styles
 * Version: 2.0.0
 * 
 * EXACT match to original Spectre AI fullscreen design
 */

/* =====================================================
   CSS VARIABLES
   ===================================================== */
:root {
    --bg-primary: #000000;
    --bg-elevated: #111111;
    --bg-card: rgba(17, 17, 17, 0.5);
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --accent-amber: #f59e0b;
    --accent-amber-hover: #fbbf24;
    --accent-emerald: #10b981;
    --accent-red: #ef4444;
    --accent-purple: #8b5cf6;
    --accent-blue: #3b82f6;
    --border-color: #1f2937;
    --border-radius: 22px;
}

/* =====================================================
   GLOBAL RESETS FOR FULLSCREEN TAKEOVER
   ===================================================== */
.bitghost-meetings-root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

.bitghost-meetings-root * {
    box-sizing: border-box;
}

.bitghost-meetings-root input,
.bitghost-meetings-root textarea,
.bitghost-meetings-root button {
    font-family: inherit;
}

/* =====================================================
   CUSTOM ANIMATIONS (from original styles.css)
   ===================================================== */
@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.animate-pulse-ring {
    animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* =====================================================
   VIDEO GRID LAYOUTS (from original styles.css)
   ===================================================== */
.video-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.video-grid-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
}

.video-grid-3 > :first-child {
    grid-column: span 2;
}

.video-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
}

/* =====================================================
   SCROLLBAR STYLING (from original styles.css)
   ===================================================== */
.bitghost-meetings-root ::-webkit-scrollbar {
    width: 6px;
}

.bitghost-meetings-root ::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 3px;
}

.bitghost-meetings-root ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}

.bitghost-meetings-root ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* =====================================================
   GLASS MORPHISM EFFECT (from original styles.css)
   ===================================================== */
.glass {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* =====================================================
   CALENDAR DAY HOVER EFFECT (from original styles.css)
   ===================================================== */
.calendar-day {
    position: relative;
}

.calendar-day:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.1), transparent);
    border-radius: 0.75rem;
    pointer-events: none;
}

/* =====================================================
   MEETING CARD GLOW (from original styles.css)
   ===================================================== */
.meeting-card:hover {
    box-shadow: 0 0 30px rgba(255, 184, 0, 0.1);
}

/* =====================================================
   BUTTON STYLES
   ===================================================== */
.bitghost-meeting-btn {
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
}

.bitghost-meeting-btn:focus {
    outline: 2px solid var(--accent-amber);
    outline-offset: 2px;
}

/* =====================================================
   FORM INPUT FOCUS STATES
   ===================================================== */
.bitghost-meetings-root input:focus,
.bitghost-meetings-root textarea:focus {
    outline: none;
    border-color: var(--accent-amber) !important;
}

/* =====================================================
   THEME OVERRIDES - Ensure black background persists
   ===================================================== */
.bitghost-meetings-root,
.bitghost-meetings-root > div {
    background-color: #000000 !important;
}

/* Reset potential theme link colors */
.bitghost-meetings-root a {
    color: inherit;
    text-decoration: none;
}

/* Ensure buttons don't inherit theme styles */
.bitghost-meetings-root button {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
}

/* Override theme heading styles */
.bitghost-meetings-root h1,
.bitghost-meetings-root h2,
.bitghost-meetings-root h3,
.bitghost-meetings-root h4 {
    margin: 0;
    color: inherit;
    font-weight: inherit;
}

/* Override theme paragraph styles */
.bitghost-meetings-root p {
    margin: 0;
}

/* =====================================================
   LOADING STATE
   ===================================================== */
.bitghost-meetings-root .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(245, 158, 11, 0.2);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}