:root { --feedback-width:460px; --feedback-gap:12px; --feedback-pad:24px; --feedback-edge:16px; --feedback-icon-size:26px; --feedback-layer:100; --feedback-backdrop:#11182766; }
#notification { inset:auto var(--feedback-edge) var(--feedback-edge) auto; margin:0; cursor:auto; width:max-content; max-width:calc(100vw - var(--feedback-edge) * 2); padding:var(--feedback-gap); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); box-shadow:var(--shadow); z-index:var(--feedback-layer); }
#notification.visible { display:flex; align-items:center; gap:var(--feedback-gap); }
#notification>span:not(.feedback-success-mark) { max-width:var(--feedback-width); overflow-wrap:anywhere; }
.feedback-success-mark { display:grid; place-items:center; flex:none; width:var(--feedback-icon-size); height:var(--feedback-icon-size); border-radius:50%; background:var(--mint); color:var(--teal); font-weight:700; }
#feedback-dialog { position:fixed; inset:calc(var(--visual-top) + var(--visual-height) / 2) 0 auto; margin:0 auto; transform:translateY(-50%); width:min(var(--feedback-width),calc(100vw - var(--feedback-edge) * 2)); max-height:calc(var(--visual-height) - var(--feedback-edge) * 2); padding:var(--feedback-pad); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
#feedback-dialog::backdrop { background:var(--feedback-backdrop); }
#feedback-dialog>*+* { margin-top:var(--feedback-gap); }
#feedback-dialog p { overflow-wrap:anywhere; white-space:pre-wrap; }
#feedback-dialog .feedback-help { color:var(--muted); font-size:var(--font-small); }
#feedback-dialog>.button { width:100%; min-height:var(--touch); }
:root[data-layout="mobile"] #notification { inset:auto var(--feedback-edge) calc(var(--mobile-nav) + env(safe-area-inset-bottom) + var(--feedback-edge)); width:auto; }