/* Google Calendar Agent Page Styles */

body {
    background: #FFFAF0;
}

/* Info cards */
.card {
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.card-text {
    color: #555;
    line-height: 1.5;
}

.card-text code {
    background: #f1f1f1;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.85em;
    color: #c7254e;
}

/* Screenshot frames: fixed height so mismatched source images (portrait
   chat screenshot vs. landscape MLflow screenshot) still line up side by
   side. object-fit: contain keeps the whole screenshot visible — cover
   would crop the MLflow metric-name column. The frame background matches
   the screenshots' own dark UI chrome so the leftover letterbox strip
   blends in instead of showing as a visible border. */
.screenshot-frame {
    height: 420px;
    border-radius: 6px;
    overflow: hidden;
    background: #1c1e22;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.screenshot-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (max-width: 991.98px) {
    .screenshot-frame {
        height: 320px;
    }
}