html body #dialog:has(.invitation-layout818){width:1000px!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 32px)!important;padding:0!important;overflow:hidden!important}
html body #dialog:has(.invitation-layout818)>#dialog-close{display:none!important}
html body #dialog:has(.invitation-layout818)>#dialog-body{padding:0!important;margin:0;max-height:inherit;overflow:hidden;display:flex;flex-direction:column;min-height:0}
html body #dialog:has(.invitation-layout818) .approval-card401{display:flex;flex-direction:column;max-height:inherit;min-height:0;width:100%}
html body #dialog:has(.invitation-layout818) .approval-card401>header{flex:none;margin:0;padding:18px 22px;min-height:76px;box-sizing:border-box}
html body #dialog:has(.invitation-layout818) #approval-form{display:flex;flex-direction:column;min-height:0;overflow:hidden;margin:0;padding:0}
html body #dialog:has(.invitation-layout818) .invitation-layout818{display:grid!important;grid-template-columns:minmax(0,300px) minmax(0,1fr)!important;grid-template-rows:auto!important;align-items:start;gap:20px;padding:20px 22px!important;overflow-y:auto;min-height:0}
html body #dialog .invitation-layout818 .invitation-side818{display:block;position:static;width:auto;min-width:0;margin:0;padding:0;background:none;color:#173c60}
html body #dialog .invitation-layout818 .approval-person401{margin:0 0 16px;grid-column:auto}
html body #dialog .invitation-layout818 .approval-status401{grid-row:auto!important;grid-column:auto!important;margin:0;font-size:13px;line-height:1.5}
html body #dialog .invitation-layout818 .approval-message401{grid-column:2!important;grid-row:1!important;margin:0!important;min-width:0;padding:16px}
html body #dialog .invitation-layout818 textarea[name=body]{min-height:260px;max-height:420px;width:100%;box-sizing:border-box;resize:vertical;font:400 14px/1.6 'RL67 UI',Arial,sans-serif}
html body #dialog .invitation-layout818 .invitation-preview818{margin-top:16px;border-top:1px solid #d1deeb;padding-top:12px;font-size:13px}
html body #dialog .invitation-layout818 pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
html body #dialog .invitation-layout818 #approval-error{grid-column:1/-1;margin:0}
html body #dialog:has(.invitation-layout818) #approval-form>footer{flex:none;display:flex;gap:12px;padding:16px 22px;margin:0;background:#edf1f6;border-top:1px solid #d1deeb;flex-wrap:wrap}
html body #dialog:has(.invitation-layout818) #approval-form>footer>[data-invite-close693]{margin-right:auto}
html body #dialog:has(.invitation-layout818) #approval-form>footer>button{min-height:44px;height:auto;white-space:nowrap;margin-top:0;margin-bottom:0}
@media(max-width:700px){
 html body #dialog:has(.invitation-layout818) .invitation-layout818{grid-template-columns:minmax(0,1fr)!important;padding:16px!important;gap:16px}
 html body #dialog .invitation-layout818 .approval-message401{grid-column:1!important;grid-row:auto!important}
 html body #dialog .invitation-layout818 textarea[name=body]{min-height:200px}
 html body #dialog:has(.invitation-layout818) #approval-form>footer{padding:12px 16px;gap:8px}
 html body #dialog:has(.invitation-layout818) #approval-form>footer>button{white-space:normal;flex:1 1 140px}
}

/* 4.824: invitation fits its content instead of stretching the message panel. */
html body #dialog:has(.invitation-layout818){width:1120px!important;height:auto!important;max-height:calc(100dvh - 32px)!important}
html body #dialog:has(.invitation-layout818)>#dialog-body{height:auto!important;max-height:calc(100dvh - 32px)!important}
html body #dialog:has(.invitation-layout818) .approval-card401{height:auto!important;max-height:calc(100dvh - 32px)!important}
html body #dialog:has(.invitation-layout818) #approval-form{flex:0 1 auto!important}
html body #dialog:has(.invitation-layout818) .invitation-layout818{flex:0 1 auto!important;grid-template-columns:minmax(0,280px) minmax(0,1fr)!important;gap:16px;padding:16px 20px!important}
html body #dialog .invitation-layout818 .approval-message401{align-self:start!important;min-height:0!important;height:auto!important;display:block!important;padding:14px}
html body #dialog .invitation-layout818 .approval-message401 label.approval-editor688{flex:none!important;height:auto!important;min-height:0!important;margin-bottom:10px}
html body #dialog .invitation-layout818 .approval-message401 textarea[name=body]{flex:none!important;min-height:200px!important;max-height:380px!important;height:280px!important;resize:vertical;overflow-y:auto}
html body #dialog .invitation-layout818 .invitation-preview818{margin-top:10px;padding-top:10px}
html body #dialog .invitation-layout818 #approval-error:empty{display:none!important}
@media(max-width:700px){
 html body #dialog:has(.invitation-layout818) .invitation-layout818{grid-template-columns:minmax(0,1fr)!important;padding:14px!important}
}

/* Compact invitation editor: fit the dialog to its real content on desktop. */
html body #dialog:has(.invitation-layout818) .approval-card401>header{min-height:68px!important;padding:14px 20px!important}
html body #dialog:has(.invitation-layout818) .invitation-layout818{grid-template-columns:minmax(0,250px) minmax(0,1fr)!important;gap:14px!important;padding:14px 18px!important}
html body #dialog .invitation-layout818 .approval-person401{margin-bottom:12px!important;padding:12px 14px!important}
html body #dialog .invitation-layout818 .approval-status401{font-size:12px!important;line-height:1.45!important}
html body #dialog .invitation-layout818 .approval-status401 p{margin:0 0 10px!important}
html body #dialog .invitation-layout818 .approval-message401{padding:12px 14px!important}
html body #dialog .invitation-layout818 .approval-message401 h3{margin:0 0 10px!important}
html body #dialog .invitation-layout818 .approval-message401 label{gap:6px!important;margin-bottom:10px!important}
html body #dialog .invitation-layout818 .approval-message401 textarea[name=body]{min-height:220px!important;max-height:440px!important;height:auto!important}
html body #dialog .invitation-layout818 .invitation-preview818{margin-top:8px!important;padding-top:8px!important}
html body #dialog:has(.invitation-layout818) #approval-form>footer{padding:12px 18px!important}
@media(max-width:700px){
 html body #dialog:has(.invitation-layout818) .invitation-layout818{grid-template-columns:minmax(0,1fr)!important;padding:14px!important}
 html body #dialog .invitation-layout818 .approval-message401 textarea[name=body]{min-height:220px!important;height:auto!important}
}

/* The generic approval dialog is fixed-height; the invitation editor is not. */
@media(min-width:701px){
 #dialog.approval-modal401:has(.invitation-layout818){height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important}
 #dialog.approval-modal401:has(.invitation-layout818)>#dialog-body{height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important}
 #dialog.approval-modal401:has(.invitation-layout818) .approval-card401{height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important}
 #dialog.approval-modal401:has(.invitation-layout818) #approval-form{flex:0 0 auto!important;min-height:0!important}
 #dialog.approval-modal401:has(.invitation-layout818) .approval-content401{flex:0 0 auto!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important}
}