#porch-feedback, #porch-feedback * { box-sizing: border-box; }
#porch-feedback { color: var(--pf-ink); font-family: var(--pf-font); font-size: 16px; line-height: 1.5; text-align: left; }
#porch-feedback [hidden] { display: none !important; }
#porch-feedback button, #porch-feedback input, #porch-feedback textarea { font: inherit; letter-spacing: normal; text-transform: none; }
#porch-feedback button { cursor: pointer; border: 1px solid var(--pf-border); border-radius: 10px; box-shadow: none; margin: 0; line-height: 1.4; }
#porch-feedback button:focus-visible, #porch-feedback input:focus-visible, #porch-feedback textarea:focus-visible, #porch-feedback summary:focus-visible { outline: 3px solid var(--pf-line); outline-offset: 4px; }
#pf-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; padding: 16px 10px; background: var(--pf-brand); color: var(--pf-on-brand); z-index: 9990; border-radius: 10px 0 0 10px !important; }
#pf-backdrop { position: fixed; inset: 0; background: var(--pf-overlay); display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); z-index: 2147483000; }
#pf-dialog { position: relative; background: var(--pf-paper); color: var(--pf-ink); border-radius: 20px; box-shadow: 0 20px 80px var(--pf-shadow); width: 100%; max-width: 520px; max-height: 90vh; max-height: 90dvh; overflow: auto; overscroll-behavior: contain; padding: 38px 32px 32px; animation: pf-appear 150ms ease-out; }
#pf-dialog h2 { font: inherit; font-size: clamp(24px, 5vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--pf-ink); margin: 0 36px 12px 0; }
#pf-dialog h3 { font: inherit; font-size: 22px; font-weight: 600; margin: 16px 0; color: var(--pf-ink); }
#pf-dialog p { margin: 0 0 20px; color: var(--pf-muted); font-size: 15px; }
#pf-dialog .pf-eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 500; color: var(--pf-line); }
#pf-close { position: absolute; top: 14px; right: 14px; padding: 10px; background: transparent; color: var(--pf-ink); border: 0 !important; display: flex; }
#pf-choose { display: grid; gap: 12px; margin-top: 26px; }
#porch-feedback .pf-choice { width: 100%; min-height: 68px; background: var(--pf-paper); color: var(--pf-ink); display: flex; align-items: center; gap: 18px; padding: 18px 20px; text-align: left; font-weight: 500; transition: background-color 150ms; }
#porch-feedback .pf-choice svg { color: var(--pf-line); flex: 0 0 24px; }
#porch-feedback .pf-choice:hover { background: color-mix(in srgb, var(--pf-brand) 7%, var(--pf-paper)); border-color: var(--pf-line); }
#pf-form label { display: block; font-size: 14px; margin: 18px 0 6px; font-weight: 500; }
#pf-form input:not([type=file]), #pf-form textarea { width: 100%; max-width: 100%; border: 1px solid var(--pf-border); border-radius: 8px; background: var(--pf-paper); color: var(--pf-ink); padding: 10px 12px; min-height: 44px; }
#pf-form textarea { resize: vertical; }
#pf-form input[type=file] { max-width: 100%; font-size: 14px; }
#pf-form .pf-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#pf-form .pf-note { font-size: 13px; margin: 14px 0; }
.pf-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#pf-details { font-size: 13px; margin: 18px 0; color: var(--pf-muted); }
#pf-details summary { cursor: pointer; min-height: 32px; }
#pf-details pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; padding: 8px; border: 1px solid var(--pf-border); }
#pf-error { color: var(--pf-ink) !important; font-weight: 600; }
.pf-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
#pf-back, #pf-finish { padding: 12px 18px; background: var(--pf-paper); color: var(--pf-ink); }
#pf-send { padding: 12px 20px; background: var(--pf-brand); color: var(--pf-on-brand); }
#pf-send:disabled { opacity: .65; cursor: wait; }
#pf-loading:empty, #pf-error:empty { display: none; }
#pf-loading { margin: 16px 0 0 !important; }
@keyframes pf-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 390px) {
 #pf-tab { writing-mode: horizontal-tb; top: auto; bottom: calc(var(--porch-feedback-bottom, 20px) + env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); transform: none; border-radius: 100px !important; padding: 10px 16px; }
 #pf-backdrop { padding: 12px; }
 #pf-dialog { padding: 34px 22px 24px; max-height: calc(100dvh - 24px); }
 .pf-identity { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { #pf-dialog { animation: none; } #porch-feedback .pf-choice { transition: none; } }
@media print { #porch-feedback { display: none !important; } }