/* CSS Cog: iframe_tab_host.css */
/* ================================================================
   IFRAME TAB HOST
   Author:   Steven J. Cook
   Date:     2026-04-29
   Time:     04:30 UTC
   Model:    Claude Opus 4.7
   Chat:     Abyssal Engine Web App Development (Lexicon Block + Export Scrub)
   Revision: 1.0.0
   Pairs with: iframe_tab_host.js v1.0.0

   Each iframe tab is a div with id "view-iframe-<slug>" inserted
   into #app at runtime. The div carries the .iframe-tab-view
   class and a single child <iframe class="iframe-tab-frame">.
   ProdTabs toggles the .hidden class on the wrapper div the same
   way it does for static views.
   ================================================================ */

.iframe-tab-view {
    /* Span the full content area. Slightly less than viewport
       height so the AE header + tab bar (~120px combined) stay
       visible above. The exact 120px figure matches what other
       full-bleed views (Codex, Crafting) end up with after the
       container's padding kicks in. */
    width: 100%;
    min-height: calc(100vh - 200px);
    margin: 0;
    padding: 0;
    background: var(--bg-darkest);
    border: 1px solid var(--border-thin);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-low);
}

.iframe-tab-view.hidden {
    display: none;
}

.iframe-tab-frame {
    /* Borderless, fills the wrapper completely. The wrapper
       provides the border + radius + shadow so the iframe can
       paint edge-to-edge inside it. */
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 600px;
    border: none;
    display: block;
    /* Transparent background so AE's dark theme shows through
       during the brief load gap before the hosted page paints
       its own background. Most hosted pages will paint over
       this immediately on load. */
    background: transparent;
    /* Color-scheme hint helps the iframe's default scrollbars
       render in dark mode on browsers that respect it. */
    color-scheme: dark;
}

/* Loading affordance: a subtle pulse on the wrapper border
   while the iframe is mid-load. We can't easily detect iframe
   load completion from CSS alone, so this is a static "looks
   alive" cue rather than a true progress indicator. */
@keyframes iframeTabLoadPulse {
    0%, 100% { border-color: var(--border-thin); }
    50%      { border-color: var(--accent-blue); }
}

.iframe-tab-view {
    animation: iframeTabLoadPulse 1.6s ease-in-out 2;
}

/* Mobile: drop the rounded corners and shadow so the iframe
   uses every available pixel on small screens, and slim the
   chrome since vertical real estate is precious. */
@media (max-width: 640px) {
    .iframe-tab-view {
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        min-height: calc(100vh - 160px);
    }
    .iframe-tab-frame {
        height: calc(100vh - 160px);
        min-height: 480px;
    }
}

/* Reduced-motion: kill the loading pulse since it can be
   distracting for users who set this preference. */
@media (prefers-reduced-motion: reduce) {
    .iframe-tab-view {
        animation: none;
    }
}