/* Shared visual treatment for the authenticated portal support dialog. */
.support-dialog {
    --support-ink: #171511;
    --support-muted: #756f66;
    --support-line: rgba(36, 31, 24, 0.13);
    --support-line-strong: rgba(36, 31, 24, 0.23);
    --support-copper: #c78348;
    --support-cream: #fbf8f2;
    --support-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(21, 19, 16, 0.68);
    backdrop-filter: blur(12px) saturate(120%);
    overflow-y: auto;
}

.support-dialog[hidden] { display: none; }
.has-photo-overlay { overflow: hidden; }

.support-dialog__panel {
    width: min(660px, 100%);
    max-height: min(88vh, 820px);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 26px;
    padding: clamp(1.35rem, 3vw, 2.1rem);
    background: var(--support-cream);
    box-shadow: 0 34px 100px rgba(13, 11, 9, 0.34);
    animation: supportDialogIn 220ms var(--support-ease) both;
}

@keyframes supportDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(0.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.support-dialog__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.3rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--support-line);
}

.support-dialog__eyebrow { margin: 0 0 0.55rem; color: var(--support-copper); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; }
.support-dialog__panel h2 { margin: 0; color: var(--support-ink); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1; }
.support-dialog__intro { max-width: 34rem; margin: 0.7rem 0 0; color: var(--support-muted); font-size: 0.92rem; line-height: 1.55; }

.support-dialog__close { width: 40px; height: 40px; border: 1px solid var(--support-line-strong); border-radius: 50%; background: rgba(255, 255, 255, 0.55); color: var(--support-ink); font: 400 1.5rem/1 var(--font-body); cursor: pointer; transition: transform 140ms var(--support-ease), border-color 180ms ease, background-color 180ms ease; }
.support-dialog__close:hover, .support-dialog__close:focus-visible { border-color: var(--support-ink); background: #fff; outline: none; }
.support-dialog__close:active { transform: scale(0.94); }
.support-dialog__field + .support-dialog__field { margin-top: 1rem; }
.support-dialog__label { display: block; margin: 0 0 0.4rem; color: var(--support-ink); font-size: 0.82rem; font-weight: 700; }

.support-dialog textarea, .support-dialog input[type="email"] { width: 100%; min-height: 52px; border: 1px solid var(--support-line-strong); border-radius: 13px; padding: 0.8rem 0.9rem; background: rgba(255, 255, 255, 0.68); color: var(--support-ink); font: inherit; }
.support-dialog textarea { min-height: 150px; resize: vertical; }
.support-dialog textarea:focus, .support-dialog input[type="email"]:focus { border-color: var(--support-copper); outline: 3px solid rgba(199, 131, 72, 0.15); background: #fff; }
.support-dialog input[type="file"][hidden] { display: none; }

.support-dialog__upload { min-height: 76px; display: flex; align-items: center; gap: 0.8rem; border: 1px dashed rgba(199, 131, 72, 0.62); border-radius: 14px; padding: 0.85rem 1rem; background: rgba(230, 185, 121, 0.09); cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, transform 140ms var(--support-ease); }
.support-dialog__upload:hover { border-style: solid; border-color: var(--support-copper); background: rgba(255, 255, 255, 0.68); }
.support-dialog__upload:active { transform: scale(0.99); }
.support-dialog__upload-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--support-ink); color: #fff; font-size: 1.2rem; }
.support-dialog__upload > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 0.15rem; }
.support-dialog__upload strong { color: var(--support-ink); font-size: 0.88rem; }
.support-dialog__upload small { color: var(--support-muted); font-size: 0.76rem; }

.support-dialog__files { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.support-dialog__files li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid var(--support-line); border-radius: 12px; padding: 0.55rem 0.7rem; background: rgba(255, 255, 255, 0.58); font-size: 0.85rem; }
.support-dialog__remove { border: 0; padding: 0; background: none; color: #a33b2e; font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: underline; }
.support-dialog .upload-message { margin-top: 1rem; border-radius: 12px; padding: 0.75rem 0.85rem; font-size: 0.85rem; line-height: 1.45; }
.support-dialog .upload-message.info { background: rgba(221, 235, 247, 0.7); color: #244b69; }
.support-dialog .upload-message.success { background: rgba(221, 240, 220, 0.75); color: #2e6332; }
.support-dialog .upload-message.error { background: #fff1f0; color: #8a1c13; }
.support-dialog__actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.35rem; padding-top: 1.15rem; border-top: 1px solid var(--support-line); }

@media (max-width: 640px) {
    .support-dialog { align-items: flex-end; padding: 0; }
    .support-dialog__panel { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; padding: 1.2rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
    .support-dialog__actions { flex-direction: column-reverse; }
    .support-dialog__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .support-dialog__panel { animation: none; } }