/* Feedback uses the app's metal, graphite and restrained crimson palette. */
.feedback-pending-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 32px; padding: 0 10px; border: 1px solid #ff254038; background: linear-gradient(130deg, #211319, #131217); color: #e4b0b9; font: 600 9px var(--display); letter-spacing: .6px; transition: border-color .2s, background .2s; }
.feedback-pending-badge svg { width: 14px; height: 14px; }
.feedback-pending-badge i { width: 5px; height: 5px; background: var(--red); border-radius: 50%; }
.feedback-pending-badge:hover { border-color: #ff25407d; background: #29161d; }
.feedback-dialog { width: min(870px, calc(100vw - 38px)); max-height: min(780px, calc(100vh - 38px)); margin: auto; padding: 0; overflow: auto; border: 1px solid #ffffff20; border-top-color: #ff73874f; border-radius: 12px; color: var(--txt); background: linear-gradient(135deg, #17171d, #0d0d11 65%); box-shadow: 0 36px 100px #000a; scrollbar-width: thin; scrollbar-color: #4b2932 #111116; }
.feedback-dialog::backdrop { background: #030307b8; backdrop-filter: blur(5px); }
.feedback-dialog[open] { animation: feedback-enter .25s cubic-bezier(.2,.8,.2,1) both; }
.feedback-dialog button, .feedback-dialog textarea, .feedback-dialog input { font-family: var(--body); }
.feedback-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 13px; padding: 24px 26px 20px; border-bottom: 1px solid var(--hair); background: linear-gradient(110deg, #1c151b, #141419 55%); }
.feedback-emblem { display: grid; place-items: center; flex-shrink: 0; width: 43px; height: 43px; border: 1px solid #ff25402e; border-radius: 9px; color: var(--red-soft); background: #ff254008; }
.feedback-emblem svg { width: 22px; height: 22px; }
.feedback-eyebrow { display: block; color: #ba8c96; font: 500 9px var(--mono); letter-spacing: 1px; }
.feedback-heading h2 { margin: 6px 0 5px; font: 600 25px var(--display); letter-spacing: -.4px; outline: none; }
.feedback-heading p { margin: 0; color: #9797a4; font-size: 13px; line-height: 1.4; }
.feedback-icon-button { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; margin-left: auto; border: 1px solid #ffffff16; border-radius: 5px; color: #a7a7b3; background: #ffffff03; transition: color .2s, border-color .2s; }
.feedback-icon-button svg { width: 15px; height: 15px; }
.feedback-icon-button:hover { color: #fff; border-color: #ff254061; }
.feedback-editor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding: 23px 26px; }
.feedback-writing, .feedback-proof { min-width: 0; }
.feedback-writing { display: flex; flex-direction: column; }
.feedback-text-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; }
.feedback-text-heading label { color: #a1a1ae; font: 500 9px var(--mono); letter-spacing: .8px; }
#feedback-text-count { color: #6d6d7a; font: 9px var(--mono); }
#feedback-text-count[data-over-limit="true"] { color: #e29aaa; }
#feedback-text { width: 100%; flex: 1; min-height: 280px; max-height: 410px; padding: 14px; resize: vertical; border: 1px solid #ffffff18; border-radius: 6px; color: #d5d5df; background: #08080c80; font-size: 13px; line-height: 1.65; outline: none; user-select: text; -webkit-user-select: text; transition: border-color .18s; }
#feedback-text:focus { border-color: #ff73876b; }
#feedback-text::placeholder { color: #646471; }
.feedback-writing-hint { margin: 9px 0 0; color: #7c7c8b; font-size: 11px; line-height: 1.4; }
.feedback-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 0; border: 0; color: #91919f; background: none; font-size: 11px; transition: color .18s; }
.feedback-text-button svg { width: 13px; height: 13px; }
.feedback-text-button:hover:enabled { color: #fff; }
.feedback-text-button:disabled { opacity: .45; }
.feedback-small { margin: 8px 0 0; color: #7c7c8b; font-size: 11px; line-height: 1.4; }
.feedback-proof { padding-left: 23px; border-left: 1px solid var(--hair); }
.feedback-identity { display: flex; align-items: center; gap: 9px; padding-bottom: 20px; }
.feedback-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; overflow: hidden; border: 1px solid #ffffff17; border-radius: 50%; color: #c4bbc6; background: #27212a; }
.feedback-avatar img { width: 100%; height: 100%; object-fit: cover; }
.feedback-avatar b { font: 600 14px var(--display); }
.feedback-identity > div { min-width: 0; flex: 1; }
.feedback-identity small { display: block; color: #777783; font: 8px var(--mono); letter-spacing: .3px; }
.feedback-identity strong { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dbdbe5; font-size: 12px; }
.feedback-identity > svg { width: 13px; height: 13px; color: #8d9890; }
#feedback-discord-handle { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #777783; font-size: 10px; }
.feedback-photo-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #a1a1ae; font: 500 9px var(--mono); letter-spacing: .6px; }
#feedback-photo-badge { color: #777783; font-size: 8px; letter-spacing: .2px; }
.feedback-photo { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid #ffffff13; border-radius: 6px; background: #08080c; }
.feedback-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#feedback-photo-empty { display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 12px; text-align: center; }
#feedback-photo-empty svg { width: 26px; height: 26px; color: #665864; }
#feedback-photo-empty strong { color: #a4a4b2; font-size: 12px; font-weight: 500; }
#feedback-photo-empty span { max-width: 185px; color: #666675; font-size: 11px; line-height: 1.4; }
.feedback-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 35px; margin-top: 11px; padding: 8px 10px; border: 1px solid #ffffff22; border-radius: 5px; color: #c3c3cf; background: linear-gradient(180deg, #ffffff07, #ffffff02); font-size: 12px; font-weight: 500; transition: border-color .2s; }
.feedback-secondary svg { width: 15px; height: 15px; }
.feedback-secondary:hover:enabled { border-color: #ff738756; color: #fff; }
.feedback-secondary:disabled { opacity: .45; }
.feedback-photo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 11px; }
.feedback-photo-actions .feedback-secondary { min-width: 0; margin-top: 0; }
#feedback-capture { grid-column: 1 / -1; }
.feedback-photo-hint { margin: 8px 0 0; color: #797986; font-size: 10px; line-height: 1.4; }
.feedback-capture-progress { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px; border: 1px solid #ff254032; border-radius: 5px; background: #ff254009; }
.feedback-capture-progress strong, .feedback-capture-progress span:not(.feedback-spinner) { display: block; }
.feedback-capture-progress strong { color: #e0c8cf; font-size: 12px; }
.feedback-capture-progress div > span { margin-top: 4px; color: #a48690; font-size: 11px; line-height: 1.4; }
.feedback-spinner { width: 16px; height: 16px; flex-shrink: 0; border: 1.5px solid #ff738730; border-top-color: #ff7387; border-radius: 50%; animation: feedback-spin .8s linear infinite; }
.feedback-privacy { margin: 15px 0 0; color: #72727f; font-size: 11px; line-height: 1.5; }
.feedback-footer { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 18px; justify-content: space-between; padding: 17px 26px 19px; border-top: 1px solid var(--hair); background: #111116; }
.feedback-footer-info { min-width: 0; }
.feedback-state { display: flex; align-items: center; gap: 7px; color: #c7c7d2; font-size: 12px; }
.feedback-state strong { font-weight: 500; }
.feedback-state-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #8b7c82; }
#feedback-state-detail { display: block; max-width: 520px; margin-top: 5px; color: #81818f; font-size: 11px; line-height: 1.4; }
.feedback-save-state { display: block; min-height: 12px; margin-top: 5px; color: #63636f; font: 8px var(--mono); }
.feedback-dialog[data-status="error"] #feedback-state-detail, .feedback-dialog[data-status="captureFailed"] #feedback-state-detail { color: #e29aaa; }
.feedback-dialog[data-status="error"] .feedback-state-dot, .feedback-dialog[data-status="captureFailed"] .feedback-state-dot { background: #ff7387; }
.feedback-dialog:is([data-status="sending"], [data-status="submitting"], [data-status="checking"], [data-status="awaitingConfirmation"]) .feedback-state-dot { width: 10px; height: 10px; border: 1.5px solid #ffffff30; border-top-color: #ff7387; background: transparent; animation: feedback-spin .8s linear infinite; }
.feedback-primary { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-height: 39px; padding: 10px 17px; border: 1px solid #ff667876; border-radius: 5px; color: #fff; background: linear-gradient(120deg, #ee203b, #ae122a); font-size: 12px; font-weight: 600; box-shadow: 0 5px 15px #b008211c; transition: filter .18s, transform .18s; }
.feedback-primary svg { width: 15px; height: 15px; }
.feedback-primary:hover:enabled { filter: brightness(1.12); transform: translateY(-1px); }
.feedback-primary:disabled { opacity: .55; cursor: default; }
.feedback-success { display: flex; align-items: center; flex-direction: column; padding: 44px 26px 38px; text-align: center; animation: feedback-enter .3s ease both; }
.feedback-success-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border: 1px solid #a0b5a03d; border-radius: 50%; color: #bbd2be; background: #a0b5a008; }
.feedback-success-icon svg { width: 26px; height: 26px; }
.feedback-success h3 { margin: 9px 0 6px; font: 600 26px var(--display); }
.feedback-success p { margin: 0 0 24px; color: #9393a1; font-size: 13px; line-height: 1.6; }
#feedback-success-error { max-width: 490px; margin: 13px 0 0; color: #e29aaa; font-size: 12px; }
.feedback-success .feedback-text-button { margin-top: 10px; }
@keyframes feedback-enter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes feedback-spin { to { transform: rotate(360deg); } }
@media (max-width: 1200px) { .feedback-pending-badge { width: 30px; justify-content: center; padding: 0; gap: 0; position: relative; } .feedback-pending-badge > span { display: none; } .feedback-pending-badge i { position: absolute; right: 4px; top: 4px; width: 4px; height: 4px; } }
@media (max-height: 760px) { .feedback-heading { padding: 17px 22px 14px; } .feedback-heading h2 { font-size: 23px; } .feedback-editor { padding: 15px 22px; gap: 19px; } #feedback-text { min-height: 240px; } .feedback-proof { padding-left: 18px; } .feedback-identity { padding-bottom: 15px; } .feedback-footer { padding: 13px 22px 14px; } .feedback-privacy { margin-top: 11px; } }
@media (max-width: 680px) { .feedback-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); } .feedback-heading { padding: 18px; gap: 10px; } .feedback-emblem { width: 34px; height: 34px; } .feedback-eyebrow { font-size: 8px; letter-spacing: .5px; } .feedback-heading h2 { font-size: 21px; } .feedback-editor { grid-template-columns: 1fr; padding: 18px; } #feedback-text { min-height: 180px; } .feedback-proof { padding: 17px 0 0; border-left: 0; border-top: 1px solid var(--hair); } .feedback-photo { max-height: 240px; } .feedback-footer { align-items: stretch; flex-direction: column; gap: 11px; padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .feedback-dialog[open], .feedback-success, .feedback-spinner, .feedback-state-dot { animation: none !important; } .feedback-dialog *, .feedback-pending-badge { transition: none !important; } .feedback-primary:hover:enabled { transform: none; } .feedback-dialog::backdrop { backdrop-filter: none; } }