/* Requests to the office (docs/adr/0007): the job screen's list, asking, the thread, and voice notes. Glove-sized
   targets; the design system's colours and spacing, so it reads the same in sunlight and in dark mode. */

.job-requests { margin-top: var(--hhc-space-6); }
.job-requests h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.ask-office { font-weight: 600; }

.request-news {
    display: flex; gap: .5rem; align-items: center; margin: .75rem 0;
    padding: .75rem 1rem; border-radius: var(--hhc-radius);
    background: var(--hhc-info-bg); color: var(--hhc-info); font-weight: 600;
}

.request-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.request-card {
    display: grid; gap: .3rem; padding: .9rem 1rem; min-height: 3.5rem;
    border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius);
    background: var(--hhc-surface); color: inherit; text-decoration: none;
}
.request-card:focus-visible { outline: none; box-shadow: var(--hhc-focus); }
.request-card.waiting { border-style: dashed; }
.request-card-top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.request-kind, .request-needed { font-size: .9rem; color: var(--hhc-text-soft); }
.request-needed { font-weight: 600; }
.request-what { font-size: 1.05rem; font-weight: 600; display: flex; gap: .35rem; align-items: center; }
.request-latest { display: flex; gap: .35rem; align-items: baseline; font-size: .95rem; color: var(--hhc-text-soft); }
.request-sorted-title { font-size: 1rem; margin: 1.25rem 0 0; color: var(--hhc-text-soft); }
.request-list.sorted .request-card { opacity: .85; }

/* The Requests tab: every job's requests, new replies first, then open, then done (folded away). */
.my-requests { margin-top: var(--hhc-space-5); }
.my-requests h2 { font-size: 1.15rem; margin: 0; }
.request-job { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hhc-text-soft); overflow-wrap: anywhere; }
.request-card.has-news { border-color: var(--hhc-brass); box-shadow: inset 4px 0 0 var(--hhc-brass); }
.request-new-reply {
    display: inline-flex; gap: .3rem; align-items: center;
    padding: .15rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
    background: var(--hhc-brass); color: var(--hhc-ink);
}
.my-requests.closed > summary {
    display: flex; align-items: center; min-height: 3rem; padding: 0 1rem; cursor: pointer;
    border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius); font-weight: 700; background: var(--hhc-surface-2);
}
.my-requests.closed > summary:focus-visible { outline: none; box-shadow: var(--hhc-focus); }

.request-news-badge {
    display: inline-flex; gap: .3rem; align-items: center; margin-top: .25rem;
    padding: .15rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
    background: var(--hhc-brass); color: var(--hhc-ink);
}

.request-title { overflow-wrap: anywhere; }
.request-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: var(--hhc-text-soft); }
.request-thread { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .75rem; }
.request-reply {
    padding: .9rem 1rem; border-radius: var(--hhc-radius);
    background: var(--hhc-surface-2); border: 1px solid var(--hhc-border);
}
.request-reply.waiting { border-style: dashed; }
.request-reply-who { margin: 0 0 .35rem; display: flex; gap: .5rem; align-items: baseline; }
.request-reply-who span { font-size: .9rem; color: var(--hhc-text-soft); }
.request-reply-text { margin: .35rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.request-reply-form { margin-top: 1.5rem; display: grid; gap: .75rem; }
.request-reply-form h2 { font-size: 1.15rem; margin: 0; }

.ask-kind, .ask-stage, .ask-when { margin-top: 1rem; }
.ask-voice-label { margin: 1.25rem 0 .5rem; font-weight: 600; }
.ask-send { margin-top: 1.25rem; }

.voice-recorder { display: grid; gap: .75rem; }
.voice-record, .voice-stop { min-height: 3.75rem; font-size: 1.15rem; }
.voice-timer { display: flex; gap: .5rem; align-items: center; justify-content: center; margin: 0; font-size: 2rem; font-weight: 700; }
.voice-timer small { font-size: 1rem; font-weight: 400; color: var(--hhc-text-soft); }
.voice-preview { display: grid; gap: .5rem; }
.voice-preview audio, .voice-note audio { width: 100%; }
.voice-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.voice-note { display: grid; gap: .5rem; margin: .5rem 0; }
.voice-play { justify-self: start; min-height: 3rem; }
.voice-transcript {
    margin: 0; padding: .6rem .8rem; border-left: 4px solid var(--hhc-border-strong);
    background: var(--hhc-surface); font-style: italic; white-space: pre-line; overflow-wrap: anywhere;
}
.voice-transcript-label { display: block; font-style: normal; font-size: .8rem; font-weight: 700; color: var(--hhc-text-soft); margin-bottom: .2rem; }

/* Photos and files (docs/adr/0007, "Attachments"): previews of what is added, with a big Remove button each; and, in
   the thread, thumbnails to tap for full size and PDFs to fetch and open. */
.attach { display: grid; gap: .75rem; margin-top: 1.25rem; }
.attach-label { margin: 0; font-weight: 600; }
.attach-label small { font-weight: 400; color: var(--hhc-text-soft); }
.attach-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.attach-item {
    position: relative; min-height: 104px; overflow: hidden; border-radius: var(--hhc-radius);
    background: var(--hhc-surface-2); border: 1px solid var(--hhc-border);
}
.attach-item img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.attach-file-name { display: grid; gap: .25rem; padding: .6rem 3.25rem .6rem .6rem; font-size: .9rem; overflow-wrap: anywhere; }
.attach-file-name small { color: var(--hhc-text-soft); }
.attach-remove {
    position: absolute; top: .25rem; right: .25rem;
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--hhc-brand) 80%, transparent); color: var(--hhc-on-brand); cursor: pointer;
}
.attach-remove:focus-visible, .attach-thumb:focus-visible { outline: none; box-shadow: var(--hhc-focus); }
.attach-pdf { min-height: 3.5rem; }
.attach-pdf small { font-weight: 400; }

.attach-shown { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.attach-thumb {
    display: grid; place-items: center; gap: .2rem; width: 96px; height: 96px; padding: 0; overflow: hidden;
    border: 1px solid var(--hhc-border); border-radius: var(--hhc-radius); background: var(--hhc-surface-2); color: var(--hhc-text-soft); cursor: pointer;
}
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-get, .attach-open { min-height: 3rem; overflow-wrap: anywhere; }
.attach-get small { font-weight: 400; color: var(--hhc-text-soft); }
.attach-full {
    position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: 1fr auto; gap: .75rem; padding: 1rem;
    background: rgb(0 0 0 / .9);
}
.attach-full img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.request-attachments { display: flex; gap: .3rem; align-items: center; color: var(--hhc-text-soft); }