/* The booked-client inbox (20 Oct, Alice and the owner): a chip that cannot be missed while a
   design change or a reschedule waits, and a card inside the page for what just came in
   (web/ext-inbox.js). The header is dark in both themes; the card follows the theme. */

/* the chip: filled while anyone needs a person, ringed for a design change or a reschedule */
#booked-alert.inbox-new { background: var(--accent-gradient); color: var(--on-accent); border-color: rgba(var(--accent-rgb), .9); }
#booked-alert.inbox-hot { box-shadow: 0 0 0 2px var(--chrome-gold); font-weight: 700; }
#booked-alert.inbox-blink { animation: inbox-blink 1.2s ease-in-out infinite; }
@keyframes inbox-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 2px var(--chrome-gold); }
  50% { opacity: .45; box-shadow: 0 0 0 7px rgba(217, 138, 138, .35); }
}
/* muted, or reduced motion: no blink, a steady strong highlight instead */
#booked-alert.inbox-hot.inbox-muted { outline: 2px solid var(--ivory); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #booked-alert.inbox-blink { animation: none !important; opacity: 1; box-shadow: 0 0 0 3px var(--chrome-gold); outline: 2px solid var(--ivory); outline-offset: 2px; }
}

/* the pop-up card: below the bar on the right, above the page, under any dialog */
.inbox-pop { position: fixed; top: 84px; right: 16px; z-index: 110; width: min(360px, calc(100vw - 32px)); padding: 14px 16px 12px; border-radius: var(--r-xl); background: var(--paper); color: var(--ink); border: 1px solid var(--gold-line); border-left: 4px solid var(--info); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); animation: inbox-in .32s var(--ease) both; }
.inbox-pop.high { border-left-color: var(--gold); }
.inbox-pop-head { display: flex; align-items: center; gap: 8px; }
.inbox-pop-x { margin-left: auto; border: 0; background: transparent; color: var(--soft); padding: 4px; line-height: 0; box-shadow: none; }
.inbox-pop-x:hover { background: var(--bg2); color: var(--ink); }
.inbox-pop-x .icon { width: 16px; height: 16px; }
.inbox-pop-name { display: block; margin-top: 8px; font-size: 15px; }
.inbox-pop-what { margin: 4px 0 6px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.inbox-pop-list { margin: 4px 0; padding-left: 18px; font-size: 13px; }
.inbox-pop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@keyframes inbox-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .inbox-pop { animation: none; } }
@media (max-width: 600px) { .inbox-pop { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; } }

/* priority, in the card and the list: design change > reschedule or cancel > photos > other */
.inbox-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule2); color: var(--soft); background: transparent; font: 700 10.5px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.inbox-pill.p0 { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.inbox-pill.p1 { background: color-mix(in srgb, var(--warn) 16%, var(--paper)); border-color: var(--warn); color: var(--warn); }
.inbox-pill.p2 { background: color-mix(in srgb, var(--info) 12%, var(--paper)); border-color: color-mix(in srgb, var(--info) 40%, var(--rule)); color: var(--info); }

/* the mute toggle */
.inbox-mute-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.inbox-mute[aria-pressed="true"] { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }

#booked-dialog { width: min(900px, calc(100vw - 24px)); max-height: 86dvh; }
.booked-alert-settings { font-size: 12px; }
#booked-dialog .note-actions { gap: 8px; }
#booked-dialog .booked-evidence summary { padding: 7px 0; font-size: 12px; }
.image-preview-nav { position: absolute; bottom: 16px; left: 5%; right: 5%; display: flex; justify-content: center; align-items: center; gap: 16px; color: white; background: #181818e8; padding: 8px; border-radius: 8px; }
.image-preview-nav button { min-width: 44px; min-height: 44px; }
.image-preview-count { font-size: 12px; max-width: 65%; }
/* 4 Nov: a brief's photo has its purpose set here, beside where it is counted */
.image-preview-purpose { min-height: 44px; max-width: 220px; padding: 0 12px; border: 1px solid var(--gold-line, rgba(255,255,255,.3)); border-radius: 8px; background: #232323; color: #fff; font: 600 13px/1.2 var(--text, inherit); }
.image-preview-purpose:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.image-preview-purpose:disabled { opacity: .6; }
@media (max-width: 560px) { .image-preview-nav { flex-wrap: wrap; gap: 8px; } .image-preview-purpose { order: 3; flex: 1 1 100%; max-width: none; } }
.image-preview > img { max-height: calc(100dvh - 160px); }
#booked-dialog { overflow-y: auto; border: 1px solid var(--rule2); border-radius: var(--r); padding: 16px; }
/* 4 Nov: after the rule it narrows; before it, its 12px never applied */
@media(max-width:600px) { #booked-dialog { padding: 12px; } }
#booked-dialog .inbox-pill { color: var(--soft); background: var(--bg2); border-color: var(--rule2); }
.booked-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.booked-dialog-heading h3 { font: 600 16px var(--text); margin: 0; }
/* an artist's or a desk's Teams line (28 Oct, ext-adteams.js): the session, or the candidates
   to pick from, then the artist's own words, all in view without opening anything */
#booked-dialog .adt-item .adt-session { font-size: 13px; }
#booked-dialog .adt-item .note-quote { margin: 6px 0; }
.adt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.adt-pick > p { flex-basis: 100%; margin: 0; }
.adt-candidate { display: block; height: auto; min-height: 36px; padding: 6px 10px; text-align: left; white-space: normal; line-height: 1.35; }
.adt-candidate strong { display: inline; }
@media (max-width: 520px) { .adt-candidate { width: 100%; } }