#feedback-inbox-content { min-width: 0; }
.feedback-inbox-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.feedback-inbox-filters .field { min-width: 140px; }
.feedback-inbox-filters .feedback-inbox-search { flex: 1; min-width: 200px; }
.feedback-inbox-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.feedback-inbox-table th, .feedback-inbox-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--border, #a0a0a040); vertical-align: top; }
.feedback-inbox-table td p { margin: 5px 0 0; max-width: 420px; overflow-wrap: anywhere; }
.feedback-inbox-table small { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.feedback-inbox-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; }
.feedback-needs-reply { font-weight: 700; color: var(--accent); }

/* The review uses the shared full-window dimensions with its own scrolling columns. */
body dialog#feedback-review-dialog {
    --feedback-info: #91c5ff;
    --feedback-success: #6dd8a4;
    --feedback-warning: #f0c575;
    padding: 0 !important;
    overflow: hidden;
    background: var(--bg, #f5f7fb);
    color: var(--text, #182234);
}
:root[data-theme="light"] body dialog#feedback-review-dialog {
    --feedback-info: #245fa4;
    --feedback-success: #187249;
    --feedback-warning: #875e13;
}
.feedback-review-dialog[open] { display: flex; flex-direction: column; }
.feedback-review-dialog::backdrop { background: #0b142b99; }
.feedback-review-dialog *, .feedback-review-dialog *::before { box-sizing: border-box; }
body .feedback-review-dialog > .feedback-review-heading {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: calc(14px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 14px calc(24px + env(safe-area-inset-left));
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}
.feedback-review-heading-info { min-width: 0; }
.feedback-review-eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.feedback-review-title-row, .feedback-review-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.feedback-review-heading h3 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.feedback-review-heading-actions { flex-shrink: 0; }
.feedback-review-content {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding: 20px calc(24px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
}
.feedback-review-content > * { min-width: 0; min-height: 0; }
.feedback-review-sidebar { overflow: auto; scrollbar-gutter: stable; padding-inline-end: 4px; }
.feedback-review-sidebar > * + * { margin-top: 16px; }
.feedback-review-card { padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.feedback-review-card h4 { margin: 0; font-size: 17px; }
.feedback-review-card-heading, .feedback-reply-entry-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.feedback-review-author { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 12px; overflow-wrap: anywhere; }
.feedback-review-author > div { min-width: 0; }
.feedback-review-avatar { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: var(--panel-alt); color: var(--muted); font-size: 14px; font-weight: 700; }
.feedback-review-muted { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.feedback-review-received { margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.feedback-review-section + .feedback-review-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.feedback-review-section h5 { margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 650; }
.feedback-review-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 15px; line-height: 1.65; }
.feedback-review-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.feedback-review-actions .field { flex: 1; min-width: 120px; gap: 6px; }
.feedback-review-actions label { font-size: 13px; color: var(--muted); }
.feedback-review-actions select { width: 100%; }
.feedback-review-dialog :is(button, select) { min-height: 44px; }
.feedback-review-dialog button { font-size: 14px; }
.feedback-review-dialog .status-line { margin: 10px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.feedback-review-dialog .status-line:empty { display: none; }
.feedback-review-technical { border: 1px solid var(--border); border-radius: 14px; padding: 0 16px; background: var(--panel); }
.feedback-review-technical summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 14px 0; color: var(--muted); font-size: 14px; font-weight: 600; list-style: none; }
.feedback-review-technical summary::-webkit-details-marker { display: none; }
.feedback-review-technical summary::after { content: ''; flex: 0 0 7px; height: 7px; margin-inline-end: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.feedback-review-technical[open] summary::after { transform: rotate(225deg); }
.feedback-review-context { display: grid; grid-template-columns: minmax(75px, 1fr) minmax(0, 2fr); gap: 10px 14px; font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.feedback-review-context dt { color: var(--muted); }
.feedback-review-context dd { margin: 0; overflow-wrap: anywhere; }
.feedback-review-badge { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 4px 9px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 8px; color: var(--muted); background: color-mix(in srgb, currentColor 7%, transparent); font-size: 12px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.feedback-review-badge[hidden] { display: none; }
.feedback-review-badge[data-status="new"], .feedback-review-badge[data-status="incoming"] { color: var(--feedback-info); }
.feedback-review-badge[data-status="resolved"], .feedback-review-badge[data-status="sent"] { color: var(--feedback-success); }
.feedback-review-badge[data-status="in_progress"], .feedback-review-badge[data-status="pending"] { color: var(--feedback-warning); }
.feedback-review-badge[data-status="failed"] { color: var(--danger); }
.feedback-review-loading { grid-column: 1 / -1; align-self: start; padding: 24px; color: var(--muted); }
.feedback-reply-section { display: flex; flex-direction: column; padding: 0; overflow: auto; }
.feedback-conversation-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.feedback-conversation-heading h4 { margin-bottom: 4px; }
.feedback-reply-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.feedback-reply-history { flex: 1 1 0; min-height: 100px; overflow: auto; padding: 20px; scrollbar-gutter: stable; }
.feedback-reply-entry { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-alt); }
.feedback-reply-entry + .feedback-reply-entry { margin-top: 14px; }
.feedback-reply-entry[data-direction="inbound"] { border-inline-start: 3px solid var(--feedback-info); background: color-mix(in srgb, var(--feedback-info) 5%, var(--panel)); }
.feedback-reply-entry-heading strong { font-size: 14px; overflow-wrap: anywhere; }
.feedback-reply-metadata { display: flex; flex-wrap: wrap; gap: 3px 14px; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 7px 0 12px; overflow-wrap: anywhere; }
.feedback-reply-attachment { color: var(--muted); font-size: 12px; line-height: 1.5; border-top: 1px solid var(--border); margin: 14px 0 0; padding-top: 10px; }
.feedback-conversation-empty { display: grid; align-content: center; justify-items: center; gap: 8px; min-height: 100%; padding: 20px; text-align: center; }
.feedback-conversation-empty strong { font-size: 17px; }
.feedback-conversation-empty p { max-width: 320px; }
.feedback-reply-form { flex: 0 0 auto; display: grid; gap: 6px; border-top: 1px solid var(--border); padding: 16px 20px; }
.feedback-reply-form label { font-size: 14px; font-weight: 650; }
.feedback-reply-form textarea { width: 100%; min-height: 88px; max-height: 30dvh; resize: vertical; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-top: 4px; background: var(--panel-alt); color: inherit; font: inherit; font-size: 15px; line-height: 1.5; }
.feedback-reply-form textarea::placeholder { color: var(--muted); opacity: 1; }
.feedback-reply-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
body .feedback-review-dialog :is(input, select, textarea, button, [tabindex]) { scroll-margin-block: 16px; }

/* Short laptops need reading space; the header shortcut still reaches the reply. */
@media (min-width: 901px) and (max-height: 700px) {
    body .feedback-review-dialog > .feedback-review-heading { padding-block: calc(10px + env(safe-area-inset-top)) 10px; }
    .feedback-review-eyebrow { display: none; }
    .feedback-reply-history { flex: none; overflow: visible; }
    .feedback-conversation-heading { position: sticky; top: 0; z-index: 1; background: var(--panel); }
    .feedback-reply-form textarea { scroll-margin-block-start: 90px; }
}
@media (max-width: 900px) {
    .feedback-review-content { display: block; overflow: auto; padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
    .feedback-review-sidebar { overflow: visible; padding: 0; }
    .feedback-reply-section { margin-top: 16px; overflow: visible; }
    .feedback-reply-history { flex: none; overflow: visible; }
    .feedback-reply-form textarea { max-height: none; }
}
@media (max-width: 600px) {
    body .feedback-review-dialog > .feedback-review-heading { align-items: flex-start; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left)); }
    .feedback-review-heading h3 { font-size: 19px; }
    .feedback-review-title-row { gap: 6px; }
    .feedback-review-heading-actions { gap: 6px; }
    .feedback-review-heading-actions button { padding-inline: 10px; font-size: 13px; }
    .feedback-review-eyebrow { font-size: 10px; }
    .feedback-review-card { padding: 16px; }
    .feedback-reply-section { padding: 0; }
    .feedback-conversation-heading, .feedback-reply-form, .feedback-reply-history { padding: 16px; }
    .feedback-conversation-heading { align-items: flex-start; }
    .feedback-reply-entry { padding: 12px; }
    .feedback-review-context { grid-template-columns: 1fr; gap: 4px; }
    .feedback-review-context dd { margin-bottom: 8px; }
    .feedback-reply-form textarea { font-size: 16px; }
}
@media (max-width: 380px) {
    .feedback-review-heading-actions { flex-direction: column; align-items: stretch; }
}