/*! BB Hashtag Generator - Universal responsive layer.
 * Loaded LAST so it can harden the layout on every screen size and orientation:
 * small phones (320px), phones, foldables, tablets, laptops, ultra-wide, portrait + landscape,
 * notches / safe-area insets, on-screen keyboards (dvh), touch vs mouse, zoomed text.
 * Everything is scoped to plugin classes so it never touches the host theme.
 */

/* ---------------------------------------------------------------
   0. Foundations: nothing may be wider than its container
   --------------------------------------------------------------- */
.bbhg-modal-overlay,
.bbhg-modal-overlay *,
.bbhg-modal-overlay *::before,
.bbhg-modal-overlay *::after,
.bbhg-shortcode,
.bbhg-shortcode *,
.bbhg-tw-container,
.bbhg-tw-container *,
.bbhg-radio-bar,
.bbhg-radio-bar * {
    box-sizing: border-box;
}

.bbhg-modal-overlay img,
.bbhg-modal-overlay video,
.bbhg-modal-overlay canvas,
.bbhg-modal-overlay svg,
.bbhg-modal-overlay iframe,
.bbhg-modal-overlay embed,
.bbhg-modal-overlay object,
.bbhg-tw-container img,
.bbhg-tw-container video,
.bbhg-tw-container canvas,
.bbhg-shortcode img {
    max-width: 100%;
}
.bbhg-modal-overlay img,
.bbhg-modal-overlay video,
.bbhg-tw-container img { height: auto; }
/* keep icon-sized svgs and sized canvases (games) from being stretched */
.bbhg-modal-overlay svg[width], .bbhg-modal-overlay svg[height] { height: auto; }
.bbhg-modal-overlay canvas { height: auto; }

.bbhg-modal-overlay iframe { width: 100%; }

/* Long words, URLs, hashtags and handles wrap instead of pushing the layout sideways */
.bbhg-modal-body,
.bbhg-tw-container,
.bbhg-shortcode {
    overflow-wrap: anywhere;
    word-break: normal;
}
.bbhg-modal-body pre,
.bbhg-modal-body code,
.bbhg-modal-body textarea,
.bbhg-modal-body input { overflow-wrap: normal; }
.bbhg-modal-body pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }

/* Grid / flex children may shrink below their content width (the classic cause of horizontal overflow) */
.bbhg-modal-body [class*="grid"] > *,
.bbhg-modal-body [class*="-row"] > *,
.bbhg-modal-body [class*="-list"] > *,
.bbhg-tw-grid > *,
.bbhg-shortcode-grid > * { min-width: 0; }

/* Tables scroll inside their own box rather than stretching the modal */
.bbhg-modal-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The body of the modal never scrolls sideways; wide children scroll in their own containers */
.bbhg-modal-body { overflow-x: hidden !important; overscroll-behavior: contain; }
.bbhg-modal-body input,
.bbhg-modal-body select,
.bbhg-modal-body textarea { max-width: 100%; }
.bbhg-modal-body [style*="width:"][style*="px"] { max-width: 100%; }
.bbhg-modal-body [style*="min-width:"][style*="px"] { min-width: 0 !important; }

/* ---------------------------------------------------------------
   1. Modal shell: use the real visible viewport (dvh) and safe areas
   --------------------------------------------------------------- */
.bbhg-modal-overlay {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
}
.bbhg-modal { max-width: min(780px, 100%); }
@supports (height: 100dvh) {
    .bbhg-modal { max-height: 90dvh; }
}

/* Header: wraps gracefully instead of pushing buttons off-screen */
.bbhg-modal-header { flex-wrap: wrap; gap: 8px 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bbhg-header-left { min-width: 0; flex: 1 1 auto; }
.bbhg-header-text { min-width: 0; }
.bbhg-modal-title,
.bbhg-modal-subtitle { overflow: hidden; text-overflow: ellipsis; }
.bbhg-header-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }

/* Tabs: swipeable strip, never wider than the screen */
.bbhg-main-tabs-wrapper,
.bbhg-tabs-slider {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.bbhg-main-tabs-wrapper::-webkit-scrollbar,
.bbhg-tabs-slider::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------
   2. Tablets & small laptops (641px – 1023px): comfortable centred modal
   --------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1023px) {
    .bbhg-modal-overlay { padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
    .bbhg-modal { width: 100%; max-width: min(900px, 100%); max-height: 94vh; }
    @supports (height: 100dvh) { .bbhg-modal { max-height: 94dvh; } }
    .bbhg-modal-body { max-height: none; padding-left: 20px; padding-right: 20px; }
    .bbhg-tab { padding: 12px 16px; }
    .bbhg-modal-fullscreen { display: flex; }
    .bbhg-tw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------
   3. Phones in portrait (<= 640px): bottom sheet using dvh + safe areas
   --------------------------------------------------------------- */
@media (max-width: 640px) {
    .bbhg-modal-overlay { padding: 0; }
    .bbhg-modal {
        width: 100%;
        max-width: 100%;
        max-height: 94vh;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    @supports (height: 100dvh) { .bbhg-modal { max-height: 94dvh; } }
    .bbhg-modal-body {
        max-height: none !important;
        flex: 1 1 auto;
        min-height: 0;
        padding-left: max(14px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, env(safe-area-inset-right, 0px));
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
    .bbhg-modal-header { padding: 12px 14px; }
    .bbhg-logo { width: 40px; height: 40px; }
    .bbhg-modal-title { font-size: clamp(16px, 4.6vw, 20px); }
    .bbhg-tab { padding: 11px 14px; font-size: 13px; }

    /* Touch targets: at least 44px and 16px text in fields (stops iOS Safari zooming on focus) */
    .bbhg-modal-body input[type="text"],
    .bbhg-modal-body input[type="search"],
    .bbhg-modal-body input[type="url"],
    .bbhg-modal-body input[type="email"],
    .bbhg-modal-body input[type="number"],
    .bbhg-modal-body input:not([type]),
    .bbhg-modal-body select,
    .bbhg-modal-body textarea,
    .bbhg-tab-search-input { font-size: 16px !important; }
    .bbhg-modal-close,
    .bbhg-modal-fullscreen { min-width: 40px; min-height: 40px; }
    .bbhg-btn, .bbhg-modal-body button { min-height: 40px; }

    /* Common multi-column rows stack on narrow screens */
    .bbhg-modal-body [class*="-inputs"],
    .bbhg-modal-body [class*="-controls"],
    .bbhg-modal-body [class*="-toolbar"],
    .bbhg-modal-body [class*="-actions"],
    .bbhg-modal-body [class*="-filters"] { flex-wrap: wrap; }
    .bbhg-discover-grid,
    .bbhg-trending-grid,
    .bbhg-news-grid,
    .bbhg-insights-grid,
    .bbhg-hooks-grid,
    .bbhg-features-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .bbhg-hashtag-grid,
    .bbhg-hashtags-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
    .bbhg-tw-grid,
    .bbhg-shortcode-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Very small phones (<= 380px, e.g. iPhone SE, Galaxy Fold folded) */
@media (max-width: 380px) {
    .bbhg-modal-header { padding: 10px 10px; gap: 6px; }
    .bbhg-header-actions { gap: 4px; }
    .bbhg-logo { width: 34px; height: 34px; border-radius: 10px; }
    .bbhg-logo-icon { font-size: 20px; }
    .bbhg-modal-body { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
    .bbhg-tab { padding: 10px 12px; font-size: 12.5px; }
    .bbhg-tab svg { width: 16px; height: 16px; }
}

/* ---------------------------------------------------------------
   4. Landscape phones / any very short viewport (<= 520px tall)
   --------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
    .bbhg-modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }
    .bbhg-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: none !important;
        padding-bottom: 0;
    }
    @supports (height: 100dvh) { .bbhg-modal { height: 100dvh !important; max-height: 100dvh !important; } }
    .bbhg-modal-handle { display: none !important; }
    .bbhg-modal-header { padding: 6px 12px; flex-wrap: nowrap; }
    .bbhg-logo { width: 32px; height: 32px; border-radius: 9px; }
    .bbhg-logo-icon { font-size: 18px; }
    .bbhg-modal-title { font-size: 16px; }
    .bbhg-modal-subtitle { display: none; }
    .bbhg-modal-body { height: auto !important; max-height: none !important; flex: 1 1 auto; min-height: 0; }
    .bbhg-tab { padding: 8px 12px; }
    .bbhg-tabs-slidable { padding-top: 4px; }
    .bbhg-modal-fullscreen { display: none !important; }
    .bbhg-tw-header { padding: 12px 16px; }
}

/* Tall desktop fullscreen modal: use dvh so mobile browser bars never hide the bottom */
@media (min-width: 1024px) {
    .bbhg-modal-overlay:not(.bbhg-theme-launcher) .bbhg-modal { padding-bottom: 0; }
    @supports (height: 100dvh) {
        .bbhg-modal-overlay .bbhg-modal { height: 100dvh !important; }
        .bbhg-modal-overlay .bbhg-modal-body { height: auto !important; max-height: none !important; flex: 1 1 auto; min-height: 0; }
    }
}

/* Ultra-wide screens: keep line lengths and cards readable */
@media (min-width: 1800px) {
    .bbhg-modal-body { padding-left: max(32px, calc((100% - 1700px) / 2)); padding-right: max(32px, calc((100% - 1700px) / 2)); }
}

/* ---------------------------------------------------------------
   5. Live ticker bar (Trending Wall) and Radio bar
   --------------------------------------------------------------- */
.bbhg-tw-container { max-width: 100%; }
.bbhg-tw-ticker { min-width: 0; max-width: 100%; }
.bbhg-tw-ticker-track { min-width: 0; }
.bbhg-tw-ticker-content { width: max-content; }

@media (max-width: 640px) {
    .bbhg-tw-ticker { padding: 8px 10px; gap: 8px; }
    .bbhg-tw-ticker-label { padding: 3px 8px; font-size: 10px; letter-spacing: .5px; }
    .bbhg-tw-ticker-content { gap: 16px; font-size: 12px; }
    .bbhg-tw-header { padding: 16px; }
    .bbhg-tw-header-stats { flex-wrap: wrap; gap: 8px; }
    .bbhg-tw-header-stat { flex: 1 1 40%; min-width: 0; }
    .bbhg-tw-cloud-tags { gap: 6px; }
    .bbhg-tw-categories { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .bbhg-tw-categories::-webkit-scrollbar { display: none; }
}

@media (max-width: 380px) {
    .bbhg-tw-ticker-label { display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
    .bbhg-tw-ticker { padding: 6px 10px; margin-bottom: 8px; }
}

/* Radio bar: wraps rather than overflows; respects notches */
.bbhg-radio-bar {
    max-width: 100%;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.bbhg-radio-station { min-width: 0; }
@media (max-width: 640px) {
    .bbhg-radio-bar { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 380px) {
    .bbhg-radio-bar { gap: 6px; }
    .bbhg-radio-station { flex-basis: 92px !important; max-width: 92px !important; }
    .bbhg-radio-bar .bbhg-radio-station-label { display: none; }
}

/* ---------------------------------------------------------------
   6. Shortcode / widget output on theme pages
   --------------------------------------------------------------- */
.bbhg-shortcode { max-width: 100%; }
.bbhg-shortcode-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.bbhg-widget-open-generator { max-width: 100%; white-space: normal; min-height: 44px; }

/* ---------------------------------------------------------------
   7. Games and fixed-aspect canvases scale down on small screens
   --------------------------------------------------------------- */
.bbhg-modal-body [class*="game"] canvas,
.bbhg-modal-body [class*="flappy"] canvas,
.bbhg-modal-body [class*="blackjack"] canvas { max-width: 100%; height: auto; touch-action: manipulation; }

/* ---------------------------------------------------------------
   8. Input modality & user preferences
   --------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    .bbhg-tab, .bbhg-modal-close, .bbhg-modal-fullscreen { min-height: 44px; }
    .bbhg-tw-ticker-content:hover { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
    .bbhg-tw-ticker-content, .bbhg-radio-ticker-run { animation-duration: 120s !important; }
}
@media print {
    .bbhg-modal-overlay { position: static; display: block; padding: 0; background: none; }
    .bbhg-modal { max-height: none; height: auto !important; box-shadow: none; }
    .bbhg-modal-body { overflow: visible !important; height: auto !important; max-height: none !important; }
}