/**
 * BistroBot Widget Override Styles
 * Customizations for the ElevenLabs widget
 */

/* Widget container styling */
#widget-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    position: relative;
    isolation: isolate;  /* Create new stacking context */
    z-index: 10;  /* Higher than footer to ensure modals appear above */
}

/* Ensure ElevenLabs modals appear above footer */
elevenlabs-convai {
    position: relative !important;
    z-index: 9999 !important;
}

/* Force high z-index for any ElevenLabs overlays/modals within shadow DOM */
elevenlabs-convai * {
    position: relative !important;
}

/* Additional override for ElevenLabs fixed/absolute positioned elements */
elevenlabs-convai *[style*="position: fixed"],
elevenlabs-convai *[style*="position: absolute"] {
    z-index: 99999 !important;
}

/* Target common modal/overlay classes that might be used by ElevenLabs */
elevenlabs-convai .overlay,
elevenlabs-convai .modal,
elevenlabs-convai .terms,
elevenlabs-convai [class*="overlay"],
elevenlabs-convai [class*="modal"],
elevenlabs-convai [class*="terms"] {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Specific targeting for terms modal based on your HTML structure */
elevenlabs-convai .flex.flex-col.gap-1.terms.p-2.pt-1,
elevenlabs-convai div[class*="terms"],
elevenlabs-convai div[class*="flex flex-col gap-1"] {
    z-index: 99999 !important;
    position: fixed !important;
}

/* ElevenLabs widget styling */
elevenlabs-convai {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    min-height: 400px !important;  /* Match Trenta's natural widget height */
    max-height: calc(100dvh - 180px) !important;  /* Prevent post-call overflow; dvh = dynamic viewport height (excludes browser chrome) */
    position: relative !important;
    overflow: hidden !important;  /* Clip expanded content (ratings UI) after call ends */
    transform: translateZ(0);  /* Force GPU layer to contain absolutes */
    margin-bottom: 0 !important; /* Remove any default bottom margin */
    padding-bottom: 0 !important; /* Remove any default bottom padding */
}

/* Remove any internal bottom spacing from the widget */
elevenlabs-convai * {
    margin-bottom: 0 !important;
}

/* Target widget's internal bottom spacing more aggressively */
elevenlabs-convai .overlay {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove any borders from ElevenLabs input fields */
elevenlabs-convai input,
elevenlabs-convai input[type="text"],
elevenlabs-convai textarea,
elevenlabs-convai [contenteditable],
elevenlabs-convai [role="textbox"] {
    border: none !important;
    outline: none !important;
}

/* Widget area styling */
.widget-area {
    margin-top: 5px;  /* Minimal spacing from header */
    margin-bottom: 0;  /* No bottom margin to prevent spacing before footer */
    padding: 0 20px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;  /* Ensure widget area is properly layered */
    overflow: visible;  /* Allow widget to size naturally (matches Trenta approach) */
}

/* NOTE: ElevenLabs branding hiding is handled via shadow DOM injection in widget-core.js.
   External CSS selectors cannot penetrate shadow DOM boundaries. */

/* Mobile optimization */
@media (max-width: 768px) {
    .widget-area {
        margin-top: 3px;  /* Reduced from 8px for tighter spacing */
        margin-bottom: 0px;  /* No bottom margin on mobile either */
        padding: 0 15px;  /* Less padding on mobile */
    }

    elevenlabs-convai {
        max-width: 100% !important;
    }
}