/* css/ai-images.css
 *
 * The sketch dialog: asking for pictures, and choosing between them.
 *
 * Everything here is .ai-sk-, inside a SweetAlert popup that carries
 * .ai-sk-popup, so none of it can reach the page behind. The dialog it is
 * launched from -- popup/storyCharacter.php -- is .sc- and untouched.
 */

.ai-sk-popup {
    font-family: 'Cabin Condensed', sans-serif;
}

.ai-sk-form {
    text-align: left;
    max-width: 460px;
    margin: 0 auto;
}

.ai-sk-label {
    display: block;
    margin: 14px 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--overline);
}

.ai-sk-select {
    width: 100%;
    padding: 8px 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* The words that will be sent. Monospace-ish sizing rather than a monospace
   face: this is prose a writer is editing, not code, but it wants to be read
   closely enough to spot the phrase that upset the model. */
.ai-sk-prompt {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    line-height: 1.45;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    resize: vertical;
}

.ai-sk-hint {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Something that happened and is worth reading -- a refusal, or two of three
   coming back. Not an error style: most of what lands here is ordinary. */
.ai-sk-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-dark);
    background: var(--bg-light);
    border-left: 3px solid var(--warning);
    border-radius: 3px;
    text-align: left;
}

.ai-sk-wait {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--text-soft);
}

/* The price, said before anything is drawn. Sits directly under the count it
   is the price OF, and is the only thing in the form at full text weight --
   everything else there is a label or a hint. */
.ai-sk-cost {
    margin: 8px 0 0;
    padding: 8px 10px;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--bg-light);
    border-radius: 4px;
}

.ai-sk-short {
    color: var(--danger);
    font-weight: 600;
}

/* The staff model picker, marked as the bench tool it is: a dashed rule and a
   lock, so nobody mistakes it for part of the feature when they see a
   screenshot of it. */
.ai-sk-staff {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.ai-sk-staff .ai-sk-label {
    color: var(--danger);
}

.ai-sk-staff .ai-sk-label i {
    margin-right: 5px;
}

/* Framing and Facing, side by side. They are one decision about the photograph
   and take a line between them rather than two -- the form is already four
   controls tall before the model picker. */
.ai-sk-pair {
    display: flex;
    gap: 12px;
}

.ai-sk-pair > div {
    flex: 1 1 0;
    min-width: 0;
}

/* "The three you have are kept." Quiet, and not a warning: it is reassurance,
   and styling it like the amber note above would make keeping sketches sound
   like something to worry about. */
.ai-sk-keep {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-soft);
}

.ai-sk-keep i {
    margin-right: 5px;
    color: var(--text-muted);
}

/* ---- the choice -------------------------------------------------------- */

.ai-sk-wide {
    width: min(820px, 96vw);
}

/* Three across where there is room, and as many as fit where there is not.
   auto-fit rather than a fixed three: one sketch should not sit in a third of
   the dialog with two empty columns beside it.

   The height is capped and the grid scrolls inside it. Sketches accumulate --
   that is the point of keeping them -- and by the second or third batch an
   uncapped dialog runs off the bottom of the screen, taking Draw more and Done
   with it. 58vh leaves the title above and the buttons below on a laptop. */
.ai-sk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin: 6px 0 4px;
    max-height: 58vh;
    overflow-y: auto;
    /* Room for the scrollbar, so the last column is not clipped by it. */
    padding-right: 4px;
}

/* Once there are more than four, tiles are allowed to get smaller -- five
   across instead of three on a wide dialog. The count is what changes, not the
   layout: auto-fill still decides how many fit. */
.ai-sk-grid--dense {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}

.ai-sk-grid--dense .ai-sk-card figcaption {
    padding: 6px;
}

/* At that size a full button label does not fit, so the caption becomes the
   two controls and nothing else -- the picture is the label. */
.ai-sk-grid--dense .ai-sk-use {
    font-size: 13px;
    padding: 5px 6px;
}

.ai-sk-card {
    position: relative;
    margin: 0;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

/* The one the character is actually wearing. Marked rather than merely
   implied: a gallery of eight sketches that does not say which is in use makes
   the writer go and look at the card behind to find out. */
.ai-sk-card--current {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-dim);
}

.ai-sk-flag {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--primary);
    border-radius: 3px;
}

/* Where the Use button would be, on the one already in use. Same footprint, so
   the tiles stay the same height whichever of them is current. */
.ai-sk-using {
    flex: 1 1 auto;
    padding: 7px 10px;
    font-size: 14px;
    color: var(--text-muted);
}

.ai-sk-card img {
    display: block;
    cursor: zoom-in;
    width: 100%;
    height: auto;
    /* The portraits come back 2:3 and all three are the same shape, so nothing
       needs cropping -- but a model that returns something else must not be
       allowed to stretch the row it is in. */
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--btn-bg-light);
}

.ai-sk-card figcaption {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

.ai-sk-use {
    flex: 1 1 auto;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.ai-sk-use:hover {
    filter: brightness(1.08);
}

/* The bin is deliberately quiet: it sits beside the button somebody actually
   came here to press, and a red icon at the same weight would compete with it.
   It colours on hover, where the intent is unambiguous. */
.ai-sk-bin {
    flex: none;
    background: transparent;
    border: 0;
    padding: 6px;
    font-size: 15px;
    color: var(--text-muted);
    cursor: pointer;
}

.ai-sk-bin:hover {
    color: var(--danger);
}

/* ---- the way in, on the character dialog -------------------------------- */

/* Under the portrait, in a column fixed at 140px. Everything here is about
   staying on one line in that width: the label is short, the text does not
   wrap, and what will not fit is trimmed rather than allowed to push the
   button taller than the one above it. */
.sc-sketch-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 7px 8px;
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-dark);
    background: var(--btn-bg-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}

.sc-sketch-btn:hover {
    background: var(--primary-dim);
}

.sc-sketch-btn i {
    margin-right: 5px;
    color: var(--primary);
}