/*
 * Miniature thumbnails: redesigned drawings for the picture and sound tools.
 * Loaded after kit.css and sized in the same em (a 28th of the card's width).
 */

/* AI Image Lab: a batch arriving */
.xt-miniature .xtm-ib-prompt { position: absolute; left: 1.6em; right: 1.6em; top: 1.3em; display: flex; align-items: center; gap: .55em; padding: .55em .8em; background: #fff; border: 1px solid #dce1e7; border-radius: .65em; box-shadow: 0 .05em .12em #1c1f2a0f; }
.xt-miniature .xtm-ib-prompt .xtm-i { width: .8em; height: .8em; color: #191b22; }
.xt-miniature .xtm-ib-prompt > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .7em; color: #191b22; }
.xt-miniature .xtm-ib-prompt .xtm-m { flex: none; font-size: .6em; }
.xt-miniature .xtm-ib-grid { position: absolute; left: 1.6em; right: 1.6em; top: 4.45em; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5em; }
.xt-miniature .xtm .xtm-ib-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .5em; box-shadow: 0 0 0 1px #1c1f2a0f; }
.xt-miniature .xtm-ib-wait { display: grid; place-items: center; aspect-ratio: 1; border-radius: .5em; background: linear-gradient(135deg, #e6eaee, #f5f7f9 60%, #eceff3); box-shadow: inset 0 0 0 1px #1c1f2a0a; color: #b2b8c1; }
.xt-miniature .xtm-ib-wait .xtm-i { width: .95em; height: .95em; }
.xt-miniature .xtm-ib-progress { position: absolute; left: 1.6em; right: 1.6em; bottom: .95em; display: flex; align-items: center; gap: .8em; }
.xt-miniature .xtm-ib-progress > span:last-child { flex: none; font-size: .62em; color: #626777; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-ib-bar { flex: 1; height: .3em; border-radius: 1em; background: #dce1e7; overflow: hidden; }
.xt-miniature .xtm-ib-bar > span { display: block; height: 100%; border-radius: inherit; background: #191b22; }

/* Creative Review: image, video and copy options, one approved */
.xt-miniature .xtm-ir { position: absolute; left: 1.6em; right: 1.6em; top: 1.3em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.xt-miniature .xtm-ir-opt { padding: .35em .35em 0; background: #fff; border: 1px solid #dce1e7; border-radius: .7em; box-shadow: 0 .05em .12em #1c1f2a0f; }
.xt-miniature .xtm-ir-opt.is-pick { border-color: #286c4c; box-shadow: 0 0 0 1px #286c4c, 0 1em 2em -1.2em #1c1f2a59; }
.xt-miniature .xtm-ir-media { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border-radius: .45em; background: #eef1f4; }
.xt-miniature .xtm .xtm-ir-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xt-miniature .xtm-ir-media.is-image::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(#0b0d1200, #0b0d12b3); }
.xt-miniature .xtm-ir-headline { position: absolute; z-index: 1; left: .55em; right: .55em; bottom: .5em; font-size: .7em; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.xt-miniature .xtm-ir-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.1em; height: 2.1em; margin: -1.05em 0 0 -1.05em; border-radius: 50%; background: #ffffffeb; color: #191b22; box-shadow: 0 .4em 1em -.4em #0b0d1299; }
.xt-miniature .xtm-ir-play .xtm-i { width: .8em; height: .8em; margin-left: .1em; }
.xt-miniature .xtm-ir-len { position: absolute; right: .45em; bottom: .45em; padding: .2em .45em; border-radius: .35em; background: #191b22cc; font-size: .54em; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-ir-media.is-copy { display: flex; align-items: flex-end; padding: .7em; background: #f3f5f7; }
.xt-miniature .xtm-ir-copy { font-size: .84em; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; color: #191b22; text-wrap: balance; }
.xt-miniature .xtm-ir-foot { display: flex; align-items: center; gap: .4em; min-height: 2.15em; padding: 0 .2em; }
.xt-miniature .xtm-ir-foot > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .62em; font-weight: 500; color: #2d323c; }
.xt-miniature .xtm .xtm-ir-foot .xtm-logo { width: 1.05em; height: 1.05em; }
.xt-miniature .xtm-ir-foot .xtm-tick { width: 1.2em; height: 1.2em; }
.xt-miniature .xtm-images-review .xtm-note-br { right: 1.1em; bottom: .9em; }

/* Social Scheduler: a week of posts */
.xt-miniature .xtm-is-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 100%; }
.xt-miniature .xtm-is-day { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .45em; min-width: 0; padding: .5em .35em; border-right: 1px solid #eef1f4; }
.xt-miniature .xtm-is-day:last-child { border-right: 0; }
.xt-miniature .xtm-is-day.is-today { background: #f6f8f9; }
.xt-miniature .xtm-is-h { display: flex; align-items: baseline; gap: .35em; padding: 0 .2em; }
.xt-miniature .xtm-is-h span:first-child { font-size: .56em; color: #8a909c; }
.xt-miniature .xtm-is-n { font-size: .7em; font-weight: 600; color: #191b22; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-is-post { display: grid; gap: .35em; padding: .3em .3em .4em; background: #fff; border: 1px solid #e2e6eb; border-radius: .5em; box-shadow: 0 .05em .12em #1c1f2a0a; }
.xt-miniature .xtm .xtm-is-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .3em; }
.xt-miniature .xtm-is-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; padding: .55em .5em; border-radius: .45em; background: #f3f5f7; font-size: .58em; font-weight: 500; line-height: 1.32; color: #191b22; }
.xt-miniature .xtm-is-meta { display: flex; align-items: center; gap: .35em; padding: 0 .1em; font-size: .56em; color: #626777; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-is-net { flex: none; width: 1.15em; height: 1.15em; color: #191b22; }
.xt-miniature .xtm-is-meta .xtm-tick { width: 1.3em; height: 1.3em; margin-left: auto; }
.xt-miniature .xtm-is-post.is-ok .xtm-is-meta { color: #286c4c; }

/* Image Optimiser: the saving first */
.xt-miniature .xtm-io-head { padding: 1.05em 1.15em .85em; border-bottom: 1px solid #e6e9ee; }
.xt-miniature .xtm-io-saved { font-size: 1.95em; font-weight: 600; line-height: 1; letter-spacing: -.05em; color: #191b22; }
.xt-miniature .xtm-io-sum { display: flex; align-items: center; gap: .4em; margin-top: .55em; font-size: .66em; color: #626777; }
.xt-miniature .xtm-io-sum .xtm-tick { width: 1.45em; height: 1.45em; }
.xt-miniature .xtm-io-row { display: grid; grid-template-columns: 1.9em minmax(0, 1fr) 5.2em 3.6em; align-items: center; gap: .7em; padding: .5em 1.15em; border-bottom: 1px solid #eef1f4; }
.xt-miniature .xtm .xtm-io-row img { width: 1.9em; height: 1.9em; object-fit: cover; border-radius: .35em; box-shadow: 0 0 0 1px #1c1f2a0f; }
.xt-miniature .xtm-io-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .64em; font-weight: 500; color: #191b22; }
.xt-miniature .xtm-io-bar { height: .42em; border-radius: 1em; background: #e3e7ec; overflow: hidden; }
.xt-miniature .xtm-io-bar > span { display: block; height: 100%; border-radius: inherit; background: #191b22; }
.xt-miniature .xtm-io-size { display: grid; justify-items: end; gap: .1em; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-io-size del { font-size: .54em; color: #8a909c; }
.xt-miniature .xtm-io-size strong { font-size: .66em; font-weight: 600; color: #191b22; }

/* Render to Reality: render and photo either side of a divider */
.xt-miniature .xtm .xtm-rr-a, .xt-miniature .xtm .xtm-rr-b img { position: absolute; top: 0; height: 100%; object-fit: cover; }
.xt-miniature .xtm .xtm-rr-a { left: 0; width: 100%; }
.xt-miniature .xtm-rr-b { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; overflow: hidden; }
.xt-miniature .xtm .xtm-rr-b img { left: -100%; width: 200%; }
.xt-miniature .xtm-rr-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 .4em #1c1f2a33; }
.xt-miniature .xtm-rr-line span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 1.9em; height: 1.9em; margin: -.95em 0 0 -.95em; border-radius: 50%; background: #fff; color: #2d323c; box-shadow: 0 .3em .8em -.2em #1c1f2a66; }
.xt-miniature .xtm-rr-label { position: absolute; z-index: 2; top: .9em; padding: .35em .7em; border-radius: .45em; background: #ffffffeb; font-size: .6em; font-weight: 500; color: #191b22; }
.xt-miniature .xtm-rr-label.is-a { left: .9em; }
.xt-miniature .xtm-rr-label.is-b { right: .9em; }

/* Meal Planner: the week's dinners */
.xt-miniature .xtm-im-meals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; padding: .75em .85em 0; }
.xt-miniature .xtm-im-meal { min-width: 0; }
.xt-miniature .xtm .xtm-im-meal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .45em; box-shadow: 0 0 0 1px #1c1f2a0f; }
.xt-miniature .xtm-im-day { margin-top: .55em; font-size: .56em; color: #8a909c; }
.xt-miniature .xtm-im-meal.is-today .xtm-im-day { font-weight: 600; color: #191b22; }
.xt-miniature .xtm-im-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .2em; font-size: .64em; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: #191b22; }
.xt-miniature .xtm-im-s { display: flex; align-items: center; gap: .3em; margin-top: .3em; font-size: .54em; color: #626777; }
.xt-miniature .xtm-im-s .xtm-i { width: .95em; height: .95em; }
.xt-miniature .xtm-im-list { display: flex; align-items: center; gap: .5em; margin-top: .85em; padding: .7em .85em; border-top: 1px solid #eef1f4; }
.xt-miniature .xtm-im-list .xtm-strong { font-size: .64em; }
.xt-miniature .xtm-im-list .xtm-m { font-size: .58em; }
.xt-miniature .xtm-im-list .xtm-tick { width: 1.25em; height: 1.25em; }

/* Recall: the photo and the place */
.xt-miniature .xtm-irc-search { position: absolute; left: 2.2em; right: 2.2em; top: 1.4em; display: flex; align-items: center; gap: .55em; padding: .6em .85em; background: #fff; border: 1px solid #dce1e7; border-radius: .7em; box-shadow: 0 .05em .12em #1c1f2a0f; }
.xt-miniature .xtm-irc-search .xtm-i { width: .85em; height: .85em; color: #8a909c; }
.xt-miniature .xtm-irc-search > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .72em; color: #191b22; }
.xt-miniature .xtm-irc { left: 2.2em; right: 2.2em; top: 4.7em; bottom: -1em; display: grid; grid-template-columns: 8.4em minmax(0, 1fr); align-content: start; gap: 1em; padding: .7em; }
.xt-miniature .xtm .xtm-irc-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .5em; }
.xt-miniature .xtm-irc-text { display: grid; align-content: start; gap: .5em; min-width: 0; padding-top: .45em; }
.xt-miniature .xtm-irc-where { display: flex; align-items: flex-start; gap: .4em; font-size: .7em; font-weight: 500; line-height: 1.3; color: #191b22; }
.xt-miniature .xtm-irc-where .xtm-i { margin-top: .1em; width: 1em; height: 1em; color: #191b22; }
.xt-miniature .xtm-irc-detail { font-size: .62em; line-height: 1.4; color: #626777; }
.xt-miniature .xtm-irc-more { display: flex; align-items: center; gap: .6em; margin-top: .5em; padding-top: .75em; border-top: 1px solid #eef1f4; }
.xt-miniature .xtm-irc-thumbs { display: flex; flex: none; }
.xt-miniature .xtm .xtm-irc-thumbs img { width: 1.9em; height: 1.9em; object-fit: cover; border-radius: .4em; box-shadow: 0 0 0 .14em #fff; }
.xt-miniature .xtm .xtm-irc-thumbs img + img { margin-left: -.3em; }
.xt-miniature .xtm-irc-more .xtm-m { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .58em; }

/* Voice Calls: a live call on the phone */
.xt-miniature .xtm-ic-phone { left: 2.2em; top: 1.4em; bottom: -1.4em; width: 9.6em; display: flex; flex-direction: column; align-items: center; padding: 1em .8em; border-radius: 1.3em; text-align: center; }
.xt-miniature .xtm-ic-live { display: flex; align-items: center; gap: .4em; font-size: .62em; font-weight: 600; color: #286c4c; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-ic-dot { width: .6em; height: .6em; border-radius: 50%; background: #286c4c; box-shadow: 0 0 0 .3em #286c4c26; }
.xt-miniature .xtm .xtm-ic-face { width: 3.5em; height: 3.5em; margin-top: .85em; }
.xt-miniature .xtm-ic-name { margin-top: .6em; font-size: .78em; font-weight: 600; letter-spacing: -.02em; color: #191b22; white-space: nowrap; }
.xt-miniature .xtm-ic-number { margin-top: .25em; font-size: .58em; color: #626777; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-ic-keys { display: flex; gap: .55em; margin-top: 1em; }
.xt-miniature .xtm-ic-keys span { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #eef1f4; color: #2d323c; }
.xt-miniature .xtm-ic-keys .xtm-i { width: .85em; height: .85em; }
.xt-miniature .xtm-ic-keys .is-end { background: #191b22; color: #fff; }
.xt-miniature .xtm-ic-keys .is-end .xtm-i { transform: rotate(135deg); }
.xt-miniature .xtm-ic-talk { left: 13.1em; right: 1.6em; top: 2.5em; display: grid; gap: .55em; padding: .8em .85em .9em; }
.xt-miniature .xtm-ic-agent { display: flex; align-items: center; gap: .45em; }
.xt-miniature .xtm-ic-agent .xtm-chip { width: 1.5em; height: 1.5em; }
.xt-miniature .xtm-ic-agent > span:last-child { font-size: .62em; font-weight: 600; color: #191b22; }
.xt-miniature .xtm-ic-line { max-width: 92%; padding: .5em .75em; border-radius: .75em; font-size: .62em; line-height: 1.35; }
.xt-miniature .xtm-ic-line.is-caller { justify-self: start; border-top-left-radius: .25em; background: #f0f2f5; color: #2d323c; }
.xt-miniature .xtm-ic-line.is-agent { justify-self: end; border-top-right-radius: .25em; background: #191b22; color: #fff; }
.xt-miniature .xtm-images-call .xtm-note-br { right: 1.4em; bottom: 1.1em; }

/* Transcribe: a recording becomes a transcript */
.xt-miniature .xtm-it-file { display: flex; align-items: center; gap: .65em; padding: .7em 1em; border-bottom: 1px solid #e6e9ee; }
.xt-miniature .xtm-it-type { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: .45em; background: #eef1f4; color: #2d323c; }
.xt-miniature .xtm-it-type .xtm-i { width: .95em; height: .95em; }
.xt-miniature .xtm-it-name { display: grid; gap: .1em; flex: 1; min-width: 0; }
.xt-miniature .xtm-it-name .xtm-strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .68em; }
.xt-miniature .xtm-it-name .xtm-m { font-size: .56em; }
.xt-miniature .xtm-it-status { display: flex; align-items: center; gap: .4em; flex: none; font-size: .6em; font-weight: 500; color: #286c4c; }
.xt-miniature .xtm-it-status .xtm-tick { width: 1.4em; height: 1.4em; }
.xt-miniature .xtm-it-wave { height: 1.5em; margin: .7em 1em .4em; }
.xt-miniature .xtm-it-line { display: grid; grid-template-columns: 2.3em 2.4em minmax(0, 1fr); align-items: baseline; gap: .4em; padding: .45em 1em; }
.xt-miniature .xtm-it-line.is-on { background: #f3f5f7; }
.xt-miniature .xtm-it-at { font-size: .56em; color: #8a909c; font-variant-numeric: tabular-nums; }
.xt-miniature .xtm-it-who { font-size: .6em; font-weight: 600; color: #191b22; }
.xt-miniature .xtm-it-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .62em; color: #2d323c; }
.xt-miniature .xtm-it-export { display: flex; align-items: center; gap: .45em; margin-top: .4em; padding: .65em 1em; border-top: 1px solid #eef1f4; }
.xt-miniature .xtm-it-export .xtm-m { margin-right: .3em; font-size: .58em; }
.xt-miniature .xtm-it-btn { display: inline-flex; align-items: center; gap: .3em; padding: .3em .6em; border: 1px solid #dce1e7; border-radius: .4em; font-size: .56em; font-weight: 500; color: #2d323c; }
.xt-miniature .xtm-it-btn.is-on { border-color: #191b22; background: #191b22; color: #fff; }
.xt-miniature .xtm-it-btn .xtm-i { width: 1em; height: 1em; }