#my-actions { display: inline-block; position: relative; vertical-align: middle; margin: 0 14px 0 4px; text-align: left; white-space: normal; }
#my-actions button, #my-actions a { font-family: inherit; }
#my-actions button:focus-visible, #my-actions a:focus-visible { outline: 2px solid #00a5d6; outline-offset: 2px; }
#my-actions .my-actions-trigger { position: relative; display: inline-grid; place-items: center; width: 36px; height: 34px; padding: 5px; border: 0; border-radius: 5px; color: white; background: #ffffff12; cursor: pointer; }
#my-actions .my-actions-trigger:hover, #my-actions .my-actions-trigger[aria-expanded="true"] { background: #ffffff25; }
#my-actions .my-actions-trigger:disabled { opacity: .5; cursor: default; }
.my-actions-trigger svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#my-actions .my-actions-badge { position: absolute; top: -6px; right: -8px; min-width: 21px; height: 21px; padding: 0 4px; border: 2px solid #333; border-radius: 12px; background: #d93441; color: white; font-size: 11px; font-weight: bold; line-height: 17px; text-align: center; }
#my-actions .my-actions-badge.stale { background: #9a5260; }
.my-actions-warning { position: absolute; left: -5px; bottom: -2px; background: #ffce69; color: #583600; border-radius: 50%; width: 15px; height: 15px; font-size: 11px; font-weight: bold; text-align: center; }
#my-actions .my-actions-popover { position: absolute; top: 43px; right: -8px; width: 430px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 75px); display: flex; flex-direction: column; z-index: 1100; border: 1px solid #d6e0e6; border-radius: 10px; box-shadow: 0 16px 48px #0c243838, 0 2px 8px #0c24381a; color: #253746; background: white; overflow: hidden; font-weight: normal; font-size: 13px; line-height: 1.4; }
.my-actions-heading { flex: none; display: grid; grid-template-columns: 1fr auto; padding: 17px 18px 13px; border-bottom: 1px solid #e3e9ed; }
#my-actions .my-actions-heading h2 { margin: 0; font-size: 18px; font-weight: 600; color: #253746; }
.my-actions-heading p { grid-column: 1 / -1; margin: 5px 0 0; color: #697784; font-size: 12px; }
#my-actions .my-actions-count { display: inline-block; padding: 2px 7px; margin-left: 5px; border-radius: 8px; background: #e7f1f5; color: #306279; font-size: 11px; font-weight: 600; }
#my-actions .my-actions-close { background: transparent; border: 0; color: #647684; padding: 0 4px; font-size: 24px; cursor: pointer; line-height: 1; }
.my-actions-group { display: flex; flex-direction: column; min-height: 0; }
#my-actions .my-actions-group-toggle { flex: none; width: 100%; display: flex; align-items: center; gap: 8px; padding: 12px 18px; text-align: left; border: 0; background: #f1f6f8; color: #365665; cursor: pointer; font-size: 12px; }
.my-actions-group-toggle i { color: #168aaf; }
.my-actions-fold { margin-left: auto; font-size: 16px; }
.my-actions-list { min-height: 0; overflow-y: auto; max-height: 480px; overscroll-behavior: contain; }
#my-actions a.my-actions-row { display: block; padding: 12px 18px; border-bottom: 1px solid #edf1f4; color: #253746; text-decoration: none; cursor: pointer; }
#my-actions a.my-actions-row:hover { background: #f1f9fc; }
.my-actions-title { display: flex; gap: 12px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.my-actions-title > span:last-child { color: #7d98a6; margin-left: auto; }
.my-actions-account { display: block; color: #697784; font-size: 11px; margin-top: 5px; overflow-wrap: anywhere; }
.my-actions-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 7px; color: #697784; font-size: 11px; }
.my-actions-status { padding: 2px 6px; border-radius: 4px; background: #eaf5fa; color: #176788; font-size: 10px; }
.my-actions-status.internal { background: #f0edfa; color: #66549a; }
.my-actions-empty { padding: 38px 20px; text-align: center; color: #365665; }
.my-actions-empty strong { font-size: 16px; }
.my-actions-empty p { color: #697784; margin: 8px 0 0; }
.my-actions-error { flex: none; padding: 10px 18px; color: #86481e; background: #fff5e8; font-size: 12px; }
.my-actions-loading { flex: none; padding: 8px 18px; color: #697784; font-size: 12px; }
.my-actions-footer { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #e3e9ed; color: #697784; background: #fafcfd; font-size: 11px; }
.my-actions-pages { display: flex; gap: 12px; }
#my-actions .my-actions-pages button, #my-actions .my-actions-error button { border: 0; background: transparent; color: #007fa6; cursor: pointer; font-size: 12px; padding: 3px; }
#my-actions .my-actions-pages button:disabled { opacity: .5; cursor: default; }
@media (max-width: 1023px) {
    #my-actions { float: left; margin: 3px 14px 0 0; }
    #my-actions .my-actions-popover { position: fixed; top: 54px; right: 12px; max-height: calc(100dvh - 70px); }
    /* Standalone web app: the header starts under the status bar and the bottom toolbar covers the safe area. */
    body.ios-standalone #my-actions .my-actions-popover { top: calc(54px + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 118px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
    #my-actions .my-actions-popover { right: 8px; width: calc(100vw - 16px); max-width: none; }
    #my-actions .my-actions-row { padding: 12px 14px; }
    #my-actions .my-actions-group-toggle, #my-actions .my-actions-pages button { min-height: 40px; }
}