/* TSSFL Tech Tools — widget and iframe styling */

/* API-initialised widgets (GeoGebra, Desmos, SageMathCell, Highcharts) */
.tt-widget {
    margin: 12px 0;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}

/* GeoGebra applet container */
.tt-widget[data-tool="geogebra"] {
    min-height: 500px;
}

/* Desmos container */
.tt-widget[data-tool="desmos"] {
    min-height: 420px;
}

/* SageMathCell */
.tt-widget[data-tool="sagecell"] {
    padding: 0;
}

/* Highcharts */
.tt-widget[data-tool="highcharts"] {
    min-height: 420px;
}

/* PyScript output */
.tt-widget[data-tool="pyscript"] {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 10px;
    font-family: monospace;
    font-size: 0.9em;
    border-radius: 4px;
}

/* Iframe-embedded apps (Zoom, ChatGPT, GenAI, LLM, ai1, ai2) */
.tt-iframe-wrap {
    margin: 12px 0;
    position: relative;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.tt-iframe {
    display: block;
    width: 100%;
    height: 650px;
    border: 0;
}

/* Responsive: on narrow viewports let iframes scroll */
@media (max-width: 600px) {
    .tt-iframe {
        height: 480px;
    }
}

/* ── SageCell plot output ──
   Ported from tech_integrations.html, which scoped these to `div.compute`.
   The legacy [py] and [sag] BBcodes now render as .tt-widget, so the rules
   have to follow them or plots revert to sitting at the left edge.
   A plot comes back as an inline <img>; margin:auto does nothing to an
   inline element, so it needs display:block first. Scoped to images only,
   so stdout and tracebacks stay left-aligned. */
.tt-widget .sagecell_output img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 6px auto 0;
}
.tt-widget .sagecell_output .output_png {
    text-align: center;
}