/* Widget containment fixes to prevent ElevenLabs widgets from escaping cards */

/* Strengthen containment for widget containers while allowing natural expansion */
.widget-container {
    position: relative;
    overflow: hidden;
    contain: layout style;
    isolation: isolate;
    z-index: 1;
    min-height: 600px; /* Increased minimum space for larger widgets */
    width: 100%;
    background-color: hsl(var(--card)); /* Ensure background is visible */
    border-radius: var(--radius);
    margin-top: 1rem;
}

/* Card widget area containment */
.card-widget-area {
    position: relative;
    overflow: hidden;
    contain: layout style;
    isolation: isolate;
    z-index: 1;
}

/* Show widget container when not hidden */
.widget-container:not([hidden]) {
    display: block;
}

/* Ensure chat content area properly contains widgets */
.chat-content {
    position: relative;
    overflow: auto; /* Allow scrolling if needed */
    contain: layout style;
    width: 100%;
    min-height: 500px; /* Increased minimum height for larger widget content */
    padding: 1rem;
}

/* Allow ElevenLabs ConvAI widgets to display naturally but within bounds */
elevenlabs-convai {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 500px;
}

/* Prevent only problematic positioning that could escape the card */
.widget-container [style*="position: fixed"],
.widget-container [style*="position:fixed"],
.chat-content [style*="position: fixed"],
.chat-content [style*="position:fixed"],
.card-widget-area [style*="position: fixed"],
.card-widget-area [style*="position:fixed"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
}

/* Ensure option cards maintain containment but allow expansion */
.option-card {
    contain: layout style;
    isolation: isolate;
    overflow: visible; /* Allow card to expand for widget content */
    transition: all 0.3s ease;
}

/* When widget is visible, ensure the card expands */
.option-card:has(.widget-container:not([hidden])),
.option-card:has(.card-widget-area .elevenlabs-widget-container) {
    overflow: visible;
    height: auto;
    min-height: 600px;
}

/* Fallback for browsers without :has() support */
.option-card .widget-container:not([hidden]),
.option-card .card-widget-area {
    display: block;
}

/* Additional safeguards for modal elements but less restrictive */
.widget-container [role="dialog"],
.widget-container [role="modal"],
.chat-content [role="dialog"],
.chat-content [role="modal"],
.card-widget-area [role="dialog"],
.card-widget-area [role="modal"] {
    position: absolute !important;
    max-width: calc(100% - 1rem) !important;
    max-height: calc(100vh - 4rem) !important;
    z-index: 10 !important;
}