/* WOW Studio 2026: compact user and notification panels */
/* Carbon UI shell: panels MUST be width zero when [expanded] is absent.
   Do not force a global width on the host: that makes the panel permanent. */
cds-header-panel#notification-panel,
cds-header-panel#user-profile-panel {
    box-sizing: border-box;
    color: #161616;
    background: #fff;
    max-width: 100vw;
    inset-inline-end: 0;
}
cds-header-panel#notification-panel:not([expanded]),
cds-header-panel#user-profile-panel:not([expanded]) {
    inline-size: 0 !important;
    width: 0 !important;
    visibility: hidden;
    pointer-events: none;
}
cds-header-panel#notification-panel[expanded],
cds-header-panel#user-profile-panel[expanded] {
    inline-size: min(360px, calc(100vw - 36px)) !important;
    width: min(360px, calc(100vw - 36px)) !important;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
    box-shadow: -2px 0 18px rgba(0,0,0,.10);
}
#notification-panel *,#user-profile-panel * {box-sizing:border-box}
/* Global Studio header rules force SVG fill to black, which destroys outlined
   icons. Override only the trusted Flowbite outline icons in these two drawers.
   Leave header logos, notification bell badges and other global icons alone. */
.wow--header #notification-panel svg.wow-panel-icon,
.wow--header #user-profile-panel svg.wow-panel-icon,
#notification-panel svg.wow-panel-icon,
#user-profile-panel svg.wow-panel-icon {
    display:block;
    width:20px;
    height:20px;
    flex:0 0 20px;
    min-width:20px;
    color:inherit !important;
    fill:none !important;
    stroke:currentColor;
}
.wow--header #notification-panel svg.wow-panel-icon path,
.wow--header #user-profile-panel svg.wow-panel-icon path,
#notification-panel svg.wow-panel-icon path,
#user-profile-panel svg.wow-panel-icon path {
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2;
}

.wow-header-inbox,.wow-profile-menu {
    width:100%;
    min-width:0;
    /* Carbon owns the viewport-fixed panel bounds. Fill that height instead
       of using a smaller vh max-height which leaves a blank lower strip. */
    height:100%;
    min-height:0;
    max-height:100%;
    background:#fff;
    display:flex;
    flex-direction:column;
    color:#161616;
    overflow:hidden;
}
.wow-header-inbox a,.wow-profile-menu a {text-decoration:none;color:#161616}
.wow-header-inbox__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:21px 20px 15px}
.wow-header-inbox__head h2{margin:0 0 5px;font-size:19px;font-weight:600;line-height:1.3}
.wow-header-inbox__head p{margin:0;font-size:12px;color:#525252}
.wow-header-inbox__head>a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#f4f4f4;flex-shrink:0}
.wow-header-inbox__head>a:hover{background:#e0e0e0}
.wow-header-inbox__tabs{display:flex;gap:0;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;background:#f4f4f4}
.wow-header-inbox__tabs>a{padding:12px 17px;font-size:12px;font-weight:600;color:#0f62fe}
.wow-header-inbox__tabs>a:hover{background:#e0e0e0}
.wow-header-inbox__list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wow-header-inbox__item{display:grid;grid-template-columns:8px minmax(0,1fr) 36px;gap:10px;padding:16px 15px;border-bottom:1px solid #e0e0e0;align-items:start}
.wow-header-inbox__item.is-unread{background:#f7faff}
.wow-header-inbox__dot{width:7px;height:7px;border-radius:50%;margin-top:7px}
.wow-header-inbox__item.is-unread .wow-header-inbox__dot{background:#0f62fe}
.wow-header-inbox__details{min-width:0}
.wow-header-inbox__details>a{display:block;font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.wow-header-inbox__details>a:hover{color:#0f62fe}
.wow-header-inbox__details>time{display:block;font-size:10px;color:#6f6f6f;margin-top:6px}
.wow-header-inbox__details>p{font-size:11px;color:#525252;line-height:1.5;overflow-wrap:anywhere;margin:7px 0 0}
.wow-header-inbox__item form{margin:0}
.wow-header-inbox__item button{border:0;color:#525252;background:transparent;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;border-radius:2px}
.wow-header-inbox__item button:hover{color:#0f62fe;background:#e0e0e0}
.wow-header-inbox__empty{padding:35px 18px;font-size:12px;line-height:1.5;color:#525252;text-align:center}
.wow-header-inbox__footer,.wow-profile-menu__footer{
    flex:0 0 auto;
    margin-top:auto;
    padding:0 0 env(safe-area-inset-bottom,0px);
    border-top:1px solid #e0e0e0;
    background:#f4f4f4;
}
.wow-header-inbox__footer>a,.wow-profile-menu__footer button{
    display:flex;
    width:100%;
    min-height:52px;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:15px 20px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#0f62fe;
    font-size:12px;
    line-height:1.4;
    font-weight:600;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
}
.wow-header-inbox__footer>a:hover,.wow-profile-menu__footer button:hover{background:#e0e0e0;text-decoration:none}
.wow-header-inbox__footer>a:focus-visible,.wow-profile-menu__footer button:focus-visible{outline:2px solid #0f62fe;outline-offset:-2px}
.wow-profile-menu__footer form{margin:0;width:100%;display:block}
.wow-profile-menu__identity{display:flex;gap:13px;align-items:flex-start;padding:22px 20px;border-bottom:1px solid #e0e0e0}
.wow-profile-menu__avatar,.wow-profile-menu__initials{width:52px;height:52px;flex:0 0 52px;border-radius:50%;object-fit:cover}
.wow-profile-menu__initials{display:grid;place-items:center;background:#161616;color:#fff;font-size:17px}
.wow-profile-menu__about{display:flex;flex-direction:column;gap:5px;min-width:0}
.wow-profile-menu__about>strong{font-size:16px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.wow-profile-menu__about>span{font-size:11px;color:#525252;overflow-wrap:anywhere;line-height:1.35}
.wow-profile-menu__badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.wow-profile-menu__badges>span{padding:5px 8px;background:#f4f4f4;font-size:10px;color:#393939}
.wow-profile-menu__nav{overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.wow-profile-menu__nav>a{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #e0e0e0}
.wow-profile-menu__link-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.wow-profile-menu__nav>a>.wow-panel-icon{color:#525252!important}
.wow-profile-menu__nav>a:hover>.wow-panel-icon{color:#0f62fe!important}
.wow-profile-menu__nav>a:hover{background:#edf5ff}
.wow-profile-menu__nav .wow-profile-menu__link-copy>span{font-size:13px;font-weight:600}
.wow-profile-menu__nav .wow-profile-menu__link-copy>small{font-size:11px;color:#525252}
@media(max-width:672px){
    cds-header-panel#notification-panel[expanded],
    cds-header-panel#user-profile-panel[expanded] {
        inline-size: min(340px, calc(100vw - 36px)) !important;
        width: min(340px, calc(100vw - 36px)) !important;
    }
    .wow-header-inbox__head{padding:17px}
    .wow-header-inbox__item{padding:14px 12px}
}