.customer-reminder-dialog{box-sizing:border-box;width:min(620px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--line);border-radius:18px;background:var(--page-surface,#faf9f6);color:var(--ink,#343a30);box-shadow:0 20px 60px #1b271d33}
.customer-reminder-dialog[open]{display:flex;flex-direction:column}
.customer-reminder-dialog::backdrop{background:#24311d66}
.customer-reminder-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.customer-reminder-dialog>header h2{font-size:25px;line-height:1.2;margin:0 0 6px}
.customer-reminder-dialog>header p{font-size:13px;color:var(--muted);margin:0}
.customer-reminder-dialog .reminder-close{font-size:26px;width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center;margin:-8px -10px 0 0}
.customer-reminder-body{padding:0 24px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.customer-reminder-item{padding:20px 0;overflow-wrap:anywhere}
.customer-reminder-item+.customer-reminder-item{border-top:1px solid var(--line)}
.customer-reminder-item h3{font-size:21px;line-height:1.3;margin:0 0 8px}
.customer-reminder-item p{margin:8px 0 14px;font-size:15px;line-height:1.6}
.customer-reminder-item .outline{min-height:44px;display:inline-flex;align-items:center;justify-content:center;max-width:100%;white-space:normal;text-align:center}
.customer-reminder-dialog>footer{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px 24px 20px;border-top:1px solid var(--line);flex-shrink:0;text-align:center}
.customer-reminder-dialog>footer form,.customer-reminder-dialog>footer p{margin:0}
.customer-reminder-dialog>footer form button{width:100%;min-height:44px}
.customer-reminder-dialog>footer a{font-size:14px;min-height:32px;display:grid;place-items:center}
.customer-reminder-dialog>footer .subtle,.customer-reminder-dialog>footer small{font-size:12px}
.customer-reminder-dialog [hidden]{display:none!important}
.reminder-editor{max-width:760px}.reminder-editor small{display:block;color:var(--muted);margin-top:6px;font-size:13px}
.reminder-editor .form-grid>p{min-width:0}.reminder-editor .actions{flex-wrap:wrap;align-items:center}
.reminder-editor input[type=number]{max-width:160px}
.reminder-customer-list{max-height:250px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:12px}
.reminder-customer-list label{display:flex;align-items:center;gap:10px;min-height:44px;margin:0}
.reminder-customer-list input{flex:0 0 auto}
.reminder-rule{padding:24px 0;border-bottom:1px solid var(--line)}.reminder-rule:first-child{padding-top:12px}
.reminder-rule-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.reminder-rule-heading h2{font-size:25px;margin:8px 0 0}.reminder-rule-heading>.outline{flex-shrink:0}
.reminder-rule p{margin:12px 0}.reminder-rule details summary{cursor:pointer;min-height:44px;padding:10px 0}
.reminder-rule details li{padding:6px 0}
.customer-reminder-inbox{border-block:1px solid var(--line);padding:16px 0;margin:20px 0}
@media(max-width:600px){.customer-reminder-dialog>header{padding:18px 18px 14px}.customer-reminder-body{padding:0 18px}.customer-reminder-dialog>footer{padding:14px 18px 18px}.customer-reminder-dialog>header h2{font-size:23px}.reminder-rule-heading h2{font-size:22px}.reminder-rule-heading>.outline{padding:9px 12px}}
@media(max-height:500px){.customer-reminder-dialog{max-height:calc(100dvh - 16px)}.customer-reminder-dialog>header{padding:10px 18px}.customer-reminder-dialog>footer{padding:10px 18px;gap:4px}.customer-reminder-dialog>footer .subtle{display:none}}

/* Keep the app sheet shape, but let only the list scroll beneath its fixed actions. */
html[data-ui-app="true"] body dialog.customer-reminder-dialog{padding:0;overflow:hidden}
html[data-ui-app="true"] body .customer-reminder-dialog>footer{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.customer-reminder-dialog [data-preview-body]{white-space:pre-line}