/* The site's messages and notifications (shared/footer.php + users/messenger_list.php,
   messenger_thread.php, mini_notification.php, driven by main.js), in the new design.
   Loaded on shell pages only, after legacy-popups.css; the markup is the one every page uses. */

.hp #footer { position: static; height: 0; padding: 0; background: none; font-family: 'Archivo', sans-serif; --pop-gap: clamp(16px, 2.4vw, 32px); --pop-top: 90px; }
.hp.hp-has-sub #footer { --pop-top: 142px; }
.hp #footer p.copyright { display: none; }

/* — the two round buttons — */
.hp #footer #notification_bar { bottom: var(--pop-gap); right: var(--pop-gap); z-index: 41; gap: 12px; transform-origin: bottom right; transition: transform .6s 1.4s cubic-bezier(.3,1.6,.5,1), opacity .4s 1.4s; }
.hp-js:not(.hp-ready) #footer #notification_bar { transform: scale(.4); opacity: 0; }
.hp #footer #notification_bar li.net a, .hp #footer #notification_bar li.chat a { width: 60px; height: 60px; background-color: var(--ink) !important; border: 1px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: background-color .2s, box-shadow .2s; }
.hp #footer #notification_bar li a .nf_fab_icon { color: var(--paper); }
.hp #footer #notification_bar li.net a:hover, .hp #footer #notification_bar li.chat a:hover,
.hp.hp-pop-net #footer #notification_bar li.net a, .hp.hp-pop-chat #footer #notification_bar li.chat a { background-color: var(--g) !important; border-color: var(--g); }
.hp.hp-pop-net #footer #notification_bar li.net a, .hp.hp-pop-chat #footer #notification_bar li.chat a { box-shadow: 0 0 0 4px rgba(0,255,80,.25), 0 10px 30px rgba(0,0,0,.4); }
.hp #footer #notification_bar li a:hover .nf_fab_icon, .hp.hp-pop-net #footer li.net .nf_fab_icon, .hp.hp-pop-chat #footer li.chat .nf_fab_icon { color: var(--ink); }
.hp #footer #notification_bar li .bubble { width: auto; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; top: -3px; right: -3px; background: var(--g); color: var(--ink); font: 800 11px 'Archivo', sans-serif; border: 2px solid var(--ink); }
.hp.hp-pop-net #footer li.net .bubble, .hp.hp-pop-chat #footer li.chat .bubble { opacity: 0; }

/* — both panels: above the header and the section bar, never taller than the space under them — */
.hp #footer .footer_popup { z-index: 40; font-family: 'Archivo', sans-serif; background: var(--paper); color: var(--ink); border-radius: 0; box-shadow: 0 24px 70px rgba(0,0,0,.55); right: var(--pop-gap); bottom: calc(var(--pop-gap) + 74px); overflow: hidden; }
.hp #footer .footer_popup a:hover { color: inherit; }
.hp #footer .footer_popup .close_pop_up { top: 12px; right: 14px; width: 30px; height: 30px; z-index: 3; }
.hp #footer .footer_popup .close_pop_up::before, .hp #footer .footer_popup .close_pop_up::after { border-top: 2px solid var(--paper); width: 70%; left: 15%; }
.hp #footer .footer_popup .close_pop_up:hover::before, .hp #footer .footer_popup .close_pop_up:hover::after { border-top-color: var(--g); }
/* the black bar each panel opens with: hatch, title, green count */
.hp #footer .footer_popup h3 { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; font: 800 12.5px 'Archivo', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); }
.hp #footer .footer_popup h3::before { content: ""; width: 26px; height: 9px; flex: none; background: repeating-linear-gradient(-45deg, var(--g) 0 3px, transparent 3px 6px); }
.hp #footer .footer_popup .nf_count, .hp #footer .footer_popup .msg_count { background: var(--g); color: var(--ink); border-radius: 0; padding: 2px 8px; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .06em; }

/* — notifications — */
.hp #footer .footer_popup.notifications { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - var(--pop-top) - var(--pop-gap) - 74px); }
.hp #footer .footer_popup.notifications .footer_pop_up_head { height: 54px; padding: 0 56px 0 18px; background: var(--ink); display: flex; align-items: center; flex: none; }
.hp #footer .footer_popup.notifications .nf_mark_all { position: absolute; top: 54px; right: 14px; height: 57px; display: flex; align-items: center; z-index: 2; font: 800 11px 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.hp #footer .footer_popup.notifications .nf_mark_all::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: var(--g); }
.hp #footer .footer_popup.notifications .nf_tabs { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 2px solid var(--ink); flex: none; }
.hp #footer .footer_popup .nf_tab { border-radius: 0; border: 1px solid var(--ink); background: transparent; padding: 8px 11px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.hp #footer .footer_popup .nf_tab:hover { border-color: var(--ink); background: #fff; }
.hp #footer .footer_popup .nf_tab.active { background: var(--ink); border-color: var(--ink); color: var(--g); }
.hp #footer .footer_popup.notifications .footer_pop_up_body { padding: 0; }
.hp #footer .notifications_list { padding: 0; }
.hp #footer .notifications_list .nf_group { padding: 12px 16px 6px; opacity: 1; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #4a4a46; }
.hp #footer .notifications_list .nf_item { gap: 12px; padding: 13px 16px; margin: 0; border-radius: 0; border-left: 0; border-bottom: 1px solid #deded9; color: var(--ink); width: 100%; }
.hp #footer .notifications_list .nf_item:hover { background: #fff; }
.hp #footer .notifications_list .nf_item.nf_unread { background: #fff; box-shadow: inset 4px 0 0 var(--g); }
.hp #footer .notifications_list .nf_avatar { width: 38px; height: 38px; border-radius: 0; background-color: var(--ink); }
.hp #footer .notifications_list .nf_initials { font: 800 12px 'Archivo', sans-serif; color: var(--paper); }
.hp #footer .notifications_list .nf_badge { width: 16px; height: 16px; bottom: -5px; right: -5px; font-size: 10px !important; border-radius: 0; background: var(--g); color: var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.hp #footer .notifications_list .nf_body[data-sec]::before { content: attr(data-sec); align-self: flex-start; margin-bottom: 3px; padding: 2px 7px; border: 1px solid var(--ink); font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .12em; }
.hp #footer .notifications_list .nf_body[data-sec="//GRID"]::before { background: var(--g); color: var(--ink); }
.hp #footer .notifications_list .nf_body[data-sec="//ACADEMY"]::before { background: var(--ink); color: var(--g); }
.hp #footer .notifications_list .nf_body[data-sec="//VENTURE"]::before { background: var(--ink); color: var(--paper); }
.hp #footer .notifications_list .nf_text { font: 500 13.5px/1.4 'Archivo', sans-serif; }
.hp #footer .notifications_list .nf_text strong { font-weight: 800; }
.hp #footer .notifications_list .nf_detail { font: 500 12.5px 'Archivo', sans-serif; color: #4a4a46; opacity: 1; }
.hp #footer .notifications_list .nf_time { font: 600 11px 'Archivo', sans-serif; color: #77776f; opacity: 1; }
.hp #footer .notifications_list .nf_empty { opacity: 1; padding: 34px 20px; font: 900 20px 'Archivo', sans-serif; letter-spacing: -.03em; color: var(--ink); }
.hp #footer .footer_popup.notifications .footer_pop_up_foot { padding: 0; border-top: 1px solid #deded9; flex: none; }
.hp #footer .footer_popup.notifications .footer_pop_up_foot a { display: block; padding: 14px 16px; font: 800 12px 'Archivo', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.hp #footer .footer_popup.notifications .footer_pop_up_foot a:hover { background: #fff; }

/* — messenger — */
.hp #footer .footer_popup.chat { width: min(780px, calc(100vw - 32px)); height: min(580px, calc(100vh - var(--pop-top) - var(--pop-gap) - 74px)); padding-top: 54px; }
.hp #footer .footer_popup.chat.is_open { grid-template-columns: 270px minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.hp #footer .footer_popup.chat .msg_list_head { position: absolute; top: 0; left: 0; right: 0; height: 54px; padding: 0 56px 0 18px; display: flex; align-items: center; background: var(--ink); }
.hp #footer .footer_popup.chat .msg_pane_list { border-right: 1px solid #deded9; background: var(--paper); }
.hp #footer .footer_popup.chat .msg_search { position: relative; margin: 0; padding: 12px; border: 0; border-bottom: 1px solid #deded9; border-radius: 0; }
.hp #footer .footer_popup.chat .msg_search .material-symbols-outlined { position: absolute; margin-left: 11px; font-size: 16px; opacity: .7; }
.hp #footer .footer_popup.chat .msg_search input { background: #fff; border: 1px solid #cfcfca; padding: 10px 12px 10px 34px; font: 500 13px 'Archivo', sans-serif; color: var(--ink); }
.hp #footer .footer_popup.chat .msg_search input:focus { border-color: var(--ink); }
.hp #footer .footer_popup.chat .msg_list_scroll { padding: 0; }
.hp #footer .footer_popup.chat .msg_row { gap: 12px; padding: 13px 14px; border-radius: 0; border-left: 0; border-bottom: 1px solid #deded9; color: var(--ink); }
.hp #footer .footer_popup.chat .msg_row:hover { background: #fff; }
.hp #footer .footer_popup.chat .msg_row.active { background: #fff; box-shadow: inset 4px 0 0 var(--g); }
.hp #footer .footer_popup.chat .msg_avatar { width: 44px; height: 44px; border-radius: 0; background-color: var(--ink); }
.hp #footer .footer_popup.chat .msg_thread_head .msg_avatar { width: 42px; height: 42px; }
.hp #footer .footer_popup.chat .msg_initials { font: 800 12px 'Archivo', sans-serif; color: var(--paper); }
.hp #footer .footer_popup.chat .msg_row_top strong { font: 800 14px 'Archivo', sans-serif; letter-spacing: -.01em; }
.hp #footer .footer_popup.chat .msg_time { font: 600 11px 'Archivo', sans-serif; color: #77776f; opacity: 1; }
.hp #footer .footer_popup.chat .msg_row_preview { font: 500 12.5px 'Archivo', sans-serif; color: #4a4a46; opacity: 1; }
.hp #footer .footer_popup.chat .msg_row.unread .msg_row_preview { font-weight: 700; color: var(--ink); }
.hp #footer .footer_popup.chat .msg_badge { border-radius: 0; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; background: var(--ink); color: var(--g); font: 800 10px 'Archivo', sans-serif; }
.hp #footer .footer_popup.chat .msg_empty { opacity: 1; color: #4a4a46; font: 500 13px/1.5 'Archivo', sans-serif; text-align: left; padding: 20px 16px; }
.hp #footer .footer_popup.chat .msg_pane_thread, .hp #footer .footer_popup.chat .msg_placeholder { background: #fff; }
.hp #footer .footer_popup.chat .msg_placeholder { opacity: 1; color: #77776f; font: 700 11px 'Archivo', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.hp #footer .footer_popup.chat .msg_thread_head { padding: 12px 16px; border-bottom: 2px solid var(--ink); }
.hp #footer .footer_popup.chat .msg_thread_who strong { font: 900 17px 'Archivo', sans-serif; letter-spacing: -.02em; }
.hp #footer .footer_popup.chat .msg_muted { font: 500 12px 'Archivo', sans-serif; color: #4a4a46; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp #footer .footer_popup.chat .msg_thread_close { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #cfcfca; opacity: 1; color: var(--ink); }
.hp #footer .footer_popup.chat .msg_thread_close:hover { border-color: var(--ink); }
.hp #footer .footer_popup.chat .msg_thread_close .material-symbols-outlined { font-size: 18px; }
.hp #footer .footer_popup.chat .msg_thread_scroll { padding: 18px 18px 10px; }
.hp #footer .footer_popup.chat .msg_day { opacity: 1; font: 700 10.5px 'Archivo', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #77776f; }
.hp #footer .footer_popup.chat .msg_bubble_wrap { margin-bottom: 10px; }
.hp #footer .footer_popup.chat .msg_bubble { max-width: min(420px, 82%); border-radius: 0; padding: 11px 14px; background: #f0f0ec; border-left: 3px solid var(--ink); font: 500 14px/1.45 'Archivo', sans-serif; color: var(--ink); }
.hp #footer .footer_popup.chat .msg_bubble_wrap.mine .msg_bubble { background: var(--g); border-left: 0; }
.hp #footer .footer_popup.chat .msg_stamp { font: 600 10.5px 'Archivo', sans-serif; color: #77776f; opacity: 1; letter-spacing: .04em; }
.hp #footer .footer_popup.chat .msg_composer { align-items: center; padding: 12px 14px; border-top: 1px solid #deded9; }
.hp #footer .footer_popup.chat .msg_composer textarea { min-height: 44px; border-radius: 0; border: 2px solid var(--ink); background: #fff; padding: 11px 14px; font: 500 14px/1.35 'Archivo', sans-serif; color: var(--ink); }
.hp #footer .footer_popup.chat .msg_composer textarea:focus { border-color: var(--ink); outline: 2px solid var(--g); outline-offset: 1px; }
.hp #footer .footer_popup.chat .msg_send { width: auto; height: 44px; padding: 0 18px; border-radius: 0; background: var(--ink); color: var(--g); display: flex; align-items: center; gap: 8px; }
.hp #footer .footer_popup.chat .msg_send:hover { transform: none; background: var(--g); color: var(--ink); }
.hp #footer .footer_popup.chat .msg_send[data-label] .material-symbols-outlined { display: none; }
.hp #footer .footer_popup.chat .msg_send[data-label]::after { content: attr(data-label); font: 800 12px 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hp #footer .footer_popup.chat .msg_send.disabled { opacity: 1; background: #deded9; color: #77776f; }

@media (max-width: 760px) {
    .hp #footer .footer_popup.chat.is_open { grid-template-columns: minmax(0,1fr); }
    /* the thread replaces the list here, but the black bar lives in the list: keep just the bar */
    .hp #footer .footer_popup.chat.thread_open .msg_pane_list { display: block; position: absolute; top: 0; left: 0; right: 0; height: 0; overflow: visible; border: 0; }
    .hp #footer .footer_popup.chat.thread_open .msg_pane_list > :not(.msg_list_head) { display: none; }
    .hp #footer .footer_popup.notifications .nf_tabs { gap: 4px; padding-right: 120px; }
    .hp #footer .footer_popup .nf_tab { padding: 7px 8px; font-size: 10px; letter-spacing: .06em; }
    .hp #footer .footer_popup.notifications .nf_mark_all { font-size: 10px; letter-spacing: .06em; }
    .hp #footer .footer_popup.chat .msg_thread_close .material-symbols-outlined { font-size: 0; }
    .hp #footer .footer_popup.chat .msg_thread_close .material-symbols-outlined::before { content: "←"; font: 400 16px 'Archivo', sans-serif; }
}