/* Personal Teams chat background picker. Kept separate from Teams CSS because
   this card lives in Settings; all visual application remains Teams-scoped. */

/* One slot per form factor, side by side while there is room. The desktop slot
   is the wider one so each preview roughly echoes the shape it applies to. */
.settings-teams-background__variants {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.settings-teams-background__variant-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-teams-background__variant-label { font-size: 13px; }
.settings-teams-background__variant-hint {
    font-size: 12px;
    color: var(--text-muted, #6f6e6d);
}
.settings-teams-background__preview {
    min-height: 132px;
    margin: 10px 0 12px;
    border: 1px solid var(--border-color, #d8d3c8);
    border-radius: 10px;
    background-color: #ece9e2;
    background-image: linear-gradient(rgba(20, 24, 28, .28), rgba(20, 24, 28, .28));
    background-position: center;
    /* Exactly what the conversation does with the same image: one layer,
       `cover`. A second `contain` copy used to sit under it and showed through
       in the gutters, which read as the picture repeating itself. */
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: end;
    padding: 12px;
    color: #fff;
    box-sizing: border-box;
}
/* The portrait slot previews a portrait crop. */
.settings-teams-background__variant--mobile .settings-teams-background__preview {
    min-height: 200px;
}
.settings-teams-background__preview-copy { text-shadow: 0 1px 3px rgba(0, 0, 0, .65); }
.settings-teams-background__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.settings-teams-background__file { display: none; }
@media (max-width: 600px) {
    .settings-teams-background__variants { grid-template-columns: minmax(0, 1fr); }
    .settings-teams-background__preview { min-height: 112px; }
    .settings-teams-background__variant--mobile .settings-teams-background__preview { min-height: 160px; }
    .settings-teams-background__actions > * { min-height: 40px; }
}