estreui 1.3.0 → 1.5.0

package/styles/estreUiCore.css

@@ -129,7 +129,11 @@ nav#overwatchPanel { --grab-y: 0px; --panel-block-height: calc(100vh - var(--top
 nav#overwatchPanel > header#panelHeader,
 nav#overwatchPanel > .dynamic_section_host,
 nav#overwatchPanel > .dynamic_section_block,
-nav#overwatchPanel > section#panelGrabArea { pointer-events: auto; }
+nav#overwatchPanel > section#panelGrabArea { position: relative; pointer-events: auto; }
+nav#overwatchPanel > header#panelHeader { z-index: 4; }
+nav#overwatchPanel > .dynamic_section_host { z-index: 3; }
+nav#overwatchPanel > .dynamic_section_block { z-index: 2; }
+nav#overwatchPanel > section#panelGrabArea { z-index: 1; }
 nav#overwatchPanel > header#panelHeader { display: flex; flex-direction: row; align-items: baseline; gap: 0.5em; padding: calc(var(--top-pad) + 4px) var(--basic-ui-inset-h) 4px; flex-shrink: 0; background-color: rgba(var(--cabr) / 60%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(-100%); transition-duration: 0.3s; }
 nav#overwatchPanel > header#panelHeader > #panelClock { font-size: 1.125rem; font-weight: 600; }
 nav#overwatchPanel > header#panelHeader > #panelDate { font-size: 0.875rem; opacity: 0.75; }
@@ -138,25 +142,32 @@ nav#overwatchPanel > .dynamic_section_host > .host_item { flex-grow: 1; padding:
 nav#overwatchPanel > .dynamic_section_host > .host_item[data-showing="1"] { padding-bottom: 6px; border-bottom: solid 2px var(--color-indicator-bold); color: var(--color-text-darker); }
 nav#overwatchPanel > .dynamic_section_block { display: flex; flex-flow: row nowrap; flex-shrink: 1; height: var(--panel-block-height); max-height: calc(100vh - var(--top-pad) - 42px - var(--bottom-safe-pad)); overflow-x: overlay; scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x mandatory; background-color: rgba(var(--cabr) / 40%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(calc(-100vh - var(--panel-block-height))); transition-duration: 0.3s; }
 nav#overwatchPanel > .dynamic_section_block > .block_item { width: 100%; flex-shrink: 0; overflow-y: auto; scroll-snap-align: start; }
-nav#overwatchPanel > section#panelGrabArea { flex-grow: 0; flex-shrink: 0; height: 42px; background-color: transparent; opacity: 0; transition-duration: 0.3s; }
+nav#overwatchPanel > section#panelGrabArea { flex-grow: 0; flex-shrink: 0; height: 42px; background-color: transparent; opacity: 0; pointer-events: none; transition-duration: 0.3s; }
 nav#overwatchPanel > section#panelGrabArea > div.handle { --width: 64px; --height: 4px; display: block; width: var(--width); height: var(--height); margin: 10px auto 0; border-radius: calc(var(--height) / 2); background-color: var(--color-boundary-lightside); }
 nav#overwatchPanel > section#panelGrabArea > div.pad { flex-grow: 1; }
 
 nav#overwatchPanel[data-opened="1"] > header#panelHeader,
 nav#overwatchPanel[data-opened="1"] > .dynamic_section_host,
 nav#overwatchPanel[data-opened="1"] > .dynamic_section_block { transform: translateY(0); }
-nav#overwatchPanel[data-opened="1"] > section#panelGrabArea { opacity: 1; background-color: rgb(var(--cadm) / 20%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
+nav#overwatchPanel[data-opened="1"] > section#panelGrabArea { opacity: 1; pointer-events: auto; background-color: rgb(var(--cadm) / 20%); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
 
 nav#overwatchPanel[data-on-grab="1"] > header#panelHeader,
 nav#overwatchPanel[data-on-grab="1"] > .dynamic_section_host,
 nav#overwatchPanel[data-on-grab="1"] > .dynamic_section_block { transition-delay: 0s; transition-duration: 0s; }
-nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > header#panelHeader { transform: translateY(calc(-100% + max(var(--grab-y), 0px))); }
-nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > .dynamic_section_host { transform: translateY(calc(-100% - var(--panel-block-height) + max(var(--grab-y), 0px))); }
-nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > .dynamic_section_block { transform: translateY(calc(-100vh - var(--panel-block-height) + max(var(--grab-y), 0px))); }
+nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > header#panelHeader { transform: translateY(calc(-100% + min(max(var(--grab-y), 0px), 100%))); }
+nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > .dynamic_section_host { transform: translateY(calc(-100% - var(--panel-block-height) + min(max(var(--grab-y), 0px), calc(100% + var(--panel-block-height))))); }
+nav#overwatchPanel[data-on-grab="1"]:not([data-opened="1"]) > .dynamic_section_block { transform: translateY(calc(-100vh - var(--panel-block-height) + min(max(var(--grab-y), 0px), calc(100vh + var(--panel-block-height))))); }
 nav#overwatchPanel[data-opened="1"][data-on-grab="1"] > header#panelHeader,
 nav#overwatchPanel[data-opened="1"][data-on-grab="1"] > .dynamic_section_host,
 nav#overwatchPanel[data-opened="1"][data-on-grab="1"] > .dynamic_section_block { transform: translateY(min(var(--grab-y), 0px)); }
 
+/* Tablet+ (≥740 wide) — surface both block_items side-by-side instead of tab swipe. */
+@media all and (min-width: 740px) {
+    nav#overwatchPanel > .dynamic_section_host { display: none; }
+    nav#overwatchPanel > .dynamic_section_block { scroll-snap-type: none; overflow-x: hidden; }
+    nav#overwatchPanel > .dynamic_section_block > .block_item { width: auto; flex: 1 1 0; min-width: 0; }
+}
+
 /* Top swipe trigger strip. Sits above fixedTop (z-index 130) so the downward swipe can fire while the panel is closed.
    Height stays inside the safe area (status bar / notch) plus a small 8px bleed into fixedTop so the strip
    does not cover tappable fixedTop controls. */
@@ -171,6 +182,37 @@ nav#overwatchPanel[data-opened="1"] ~ section#panelTrigger { pointer-events: non
 #darkModeToggle[data-dark-mode-state="light"] { background-color: rgba(var(--cabr) / 50%); }
 #darkModeToggle[data-dark-mode-state="dark"] { background-color: rgba(var(--cadm) / 50%); }
 
+/* Timeline (overwatchPanel #timeline) — roadmap #010. Reuses .post_block visuals from estreUiCore2.css. */
+nav#overwatchPanel #timeline { --bg-color: rgb(var(--cabr) / 70%); box-sizing: border-box; padding: 8px var(--basic-ui-inset-h) calc(8px + var(--bottom-safe-pad)); }
+nav#overwatchPanel #timeline > .timeline_host { display: flex; flex-flow: column nowrap; gap: 10px; }
+nav#overwatchPanel #timeline .timeline_group { display: flex; flex-flow: column nowrap; gap: 6px; }
+nav#overwatchPanel #timeline .timeline_group_header { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 2px; font-size: 0.75rem; font-weight: 600; color: rgb(var(--ca) / 70%); letter-spacing: 0.02em; text-transform: uppercase; }
+nav#overwatchPanel #timeline .timeline_group_header > .timeline_group_label { flex: 1 1 auto; min-width: 0; }
+nav#overwatchPanel #timeline .timeline_clear_all { flex: 0 0 auto; margin-left: 8px; padding: 3px 10px; border: none; border-radius: 10px; background-color: rgb(var(--ca) / 10%); color: rgb(var(--ca) / 80%); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
+nav#overwatchPanel #timeline .timeline_clear_all:active { background-color: rgb(var(--ca) / 25%); }
+nav#overwatchPanel #timeline .timeline_item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; box-sizing: border-box; border-radius: 14px; background-color: var(--bg-color); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); box-shadow: 1px 2px 4px 1px rgb(var(--ca) / 18%); cursor: pointer; user-select: none; }
+nav#overwatchPanel #timeline .timeline_item > .icon_place { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+nav#overwatchPanel #timeline .timeline_item > .icon_place > img { width: 100%; height: 100%; object-fit: cover; }
+nav#overwatchPanel #timeline .timeline_item > .content_place { flex: 1 1 auto; min-width: 0; --color: var(--color-text); --size: 0.9375rem; --weight: 400; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .title_line { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); line-height: 1.25em; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .subtitle_line { font-size: 0.8125rem; font-weight: 400; color: rgb(var(--ca) / 70%); line-height: 1.25em; margin-top: 1px; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .content_area { display: flex; gap: 8px; align-items: flex-start; margin-top: 3px; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .content_area > .content_place { flex: 1 1 auto; min-width: 0; color: var(--color); font-size: var(--size); font-weight: var(--weight); line-height: 1.3em; word-break: break-word; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .content_area > .icon_place { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; overflow: hidden; }
+nav#overwatchPanel #timeline .timeline_item > .content_place > .content_area > .icon_place > img { width: 100%; height: 100%; object-fit: cover; }
+nav#overwatchPanel #timeline .timeline_empty { padding: 32px 16px; text-align: center; font-size: 0.875rem; color: rgb(var(--ca) / 60%); }
+nav#overwatchPanel #timeline .timeline_item.timeline_item_enter { animation: timeline-item-enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: top center; }
+@keyframes timeline-item-enter {
+    0%   { opacity: 0; transform: translateY(-14px) scale(0.96); }
+    60%  { opacity: 1; }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+nav#overwatchPanel #timeline .timeline_item.timeline_item_exit { animation: timeline-item-exit 0.3s ease-in both; animation-delay: var(--exit-delay, 0ms); pointer-events: none; }
+@keyframes timeline-item-exit {
+    0%   { opacity: 1; transform: translateX(0); }
+    100% { opacity: 0; transform: translateX(60px); }
+}
+
 /* root tabs (bottom) */
 footer#fixedBottom { position: fixed; display: flex; flex-direction: row; flex-wrap: nowrap; z-index: 110; bottom: 0; left: 0; right: 0; height: var(--rootbar-height); margin: 0; padding-bottom: var(--bottom-safe-pad); justify-content: center; background-color: var(--color-boundary-foggy-o66); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); justify-content: center; user-select: none; }
 footer#fixedBottom nav { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; height: var(--rootbar-height); flex-grow: 1; flex-shrink: 1; user-select: none; }
@@ -202,8 +244,359 @@ footer#fixedBottom nav:not(#rootbar) { width: -moz-available; width: -webkit-fil
 footer#fixedBottom nav:not(#rootbar):first-child { padding-left: var(--left-pad); }
 footer#fixedBottom nav:not(#rootbar):last-child { padding-right: var(--right-pad); }
 }
-footer#fixedBottom nav#customFixedSections { }
-footer#fixedBottom nav#instantSections { }
+footer#fixedBottom nav#customFixedSections { position: relative; display: flex; flex-flow: row nowrap; align-items: stretch; gap: 4px; overflow: hidden; }
+footer#fixedBottom nav#instantSections { position: relative; display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: flex-start; gap: 4px; overflow: hidden; }
+
+/* Hairline separators between the rootbar tabs and the cover-bar areas — only on
+ * wide viewports where the three areas actually sit side-by-side. 1px wide,
+ * 66% tall and centered vertically; a soft vertical gradient fades to
+ * transparent at the top and bottom 20% so the bar doesn't get a hard edge.
+ * Rendered as a relative-positioned flex item so margin-left/right (the inset
+ * away from the rootbar edge) actually pushes the line — absolute positioning
+ * would ignore those margins for layout. */
+@media all and (min-height: 700px) and (min-width: 740px) {
+    footer#fixedBottom nav#customFixedSections::after,
+    footer#fixedBottom nav#instantSections::before {
+        content: "";
+        position: relative;
+        flex: 0 0 1px;
+        align-self: center;
+        height: 66%;
+        pointer-events: none;
+        background: linear-gradient(180deg,
+            transparent 0%,
+            var(--color-boundary-o5) 20%,
+            var(--color-boundary-o5) 80%,
+            transparent 100%);
+    }
+    /* Push the separator away from the cover-bar entries on its area side so
+     * the line doesn't touch a filled-out tile. The rootbar-facing edge stays
+     * flush against the rootbar so the boundary still reads as boundary. */
+    footer#fixedBottom nav#customFixedSections::after { margin-left: var(--basic-ui-inset-h-half); }
+    footer#fixedBottom nav#instantSections::before { margin-right: var(--basic-ui-inset-h-half); }
+}
+
+/* Top layer — host surface that paints above every embed (including those that
+ * sit at extreme z-index). The container itself is pointer-event-transparent;
+ * only its mounted children take input, so it never blocks the page underneath.
+ * Mount points include cover-bar overflow dropdowns and any other generic-host
+ * UI that must outrank embeds. Z-index is set to the max safe signed-int value
+ * so an embed cannot accidentally outpaint it. */
+div#topLayer { position: fixed; z-index: 2147483647; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
+div#topLayer > * { pointer-events: auto; }
+
+/* Cover bar entries — see EstreCoverBarHandle. One button per opt-in page or
+ * external embed window. Two layouts share the same markup:
+ *   - footer-mounted (instantSections / customFixedSections): column-stacked
+ *     icon-on-top + label-below, sized as a near-square tile (6/7 ~ 8/7 of
+ *     rootbar-height) to line up with rootbar tab buttons.
+ *   - dropdown-mounted (#topLayer .cover_overflow_dropdown): row-laid out
+ *     icon-then-label, free-width — a horizontal list of overflowed entries.
+ * Visual states are driven by data-active / data-minimized so the controller
+ * can flip them with attr() without touching class lists.
+ * flex-shrink: 0 keeps entries readable — when they don't fit, the leading
+ * (instantSections) or trailing (customFixedSections) ones get
+ * data-overflowed="1" and disappear from layout via display:none. The
+ * sentinel + dropdown expose them. */
+footer#fixedBottom nav#customFixedSections .cover_entry,
+footer#fixedBottom nav#instantSections .cover_entry {
+    position: relative;
+    display: inline-flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 0;
+    margin: 0; padding: 0;
+    height: 100%;
+    min-width: calc(var(--rootbar-height) * 6 / 7);
+    max-width: calc(var(--rootbar-height) * 8 / 7);
+    flex-shrink: 0;
+    border: 0; outline: 0;
+    border-radius: 0;
+    color: var(--color-text-pale, rgb(var(--ca) / 70%));
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    /* Zero out the user-agent button line-height baseline so the icon + label
+     * column stacks at the rootbar tab's exact pixel position. Children opt
+     * back in with their own line-height (label) or display:block (img). */
+    font-size: 0; line-height: 0;
+    transition-duration: 0.15s;
+    transition-property: color, opacity;
+}
+div#topLayer .cover_overflow_dropdown .cover_entry {
+    position: relative;
+    display: flex; flex-flow: row nowrap; align-items: center; gap: 6px;
+    width: 100%;
+    margin: 0; padding: 6px 12px;
+    border: 0; outline: 0;
+    border-radius: 0;
+    color: var(--color-text-darker, rgb(var(--ca) / 95%));
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    text-align: left;
+    font-size: 0.875rem; line-height: 1.25rem;
+    transition-duration: 0.15s;
+    transition-property: background-color, color, opacity;
+}
+/* Footer entries — keep the visual minimal: indicator bar + label color tell the
+ * state, no background fill. Dropdown rows are a contextual list so they keep
+ * the hover/active background highlight. */
+footer#fixedBottom nav .cover_entry[data-active="1"] { color: var(--color-text-darker, rgb(var(--ca) / 95%)); }
+footer#fixedBottom nav .cover_entry[data-minimized="1"] { opacity: 0.55; }
+footer#fixedBottom nav .cover_entry[data-minimized="1"][data-active="1"] { opacity: 0.8; }
+div#topLayer .cover_overflow_dropdown .cover_entry:hover { background-color: rgb(var(--ca) / 8%); }
+div#topLayer .cover_overflow_dropdown .cover_entry[data-active="1"] { color: var(--color-text-darker, rgb(var(--ca) / 95%)); background-color: rgb(var(--ca) / 12%); }
+div#topLayer .cover_overflow_dropdown .cover_entry[data-minimized="1"] { opacity: 0.55; }
+div#topLayer .cover_overflow_dropdown .cover_entry[data-minimized="1"][data-active="1"] { opacity: 0.8; }
+/* Footer icon matches rootbar tab maskable_icon size (32x32) for visual line-up. */
+footer#fixedBottom nav .cover_entry > .cover_icon { display: inline-flex; flex-shrink: 0; width: 32px; height: 32px; margin-bottom: 5px; align-items: center; justify-content: center; line-height: 0; }
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; align-items: center; justify-content: center; line-height: 0; }
+footer#fixedBottom nav .cover_entry > .cover_icon > img,
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon > img { display: block; width: 100%; height: 100%; }
+/* footer label — small caption under the icon, follows rootbar tab label style. */
+footer#fixedBottom nav .cover_entry > label {
+    flex-shrink: 1; min-width: 0; max-width: 100%;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font-size: 0.625rem; line-height: 0.75rem;
+    color: inherit;
+    cursor: inherit;
+}
+/* dropdown label — full readable text inline next to the icon. flex-grow so
+ * the row stretches to fill the dropdown's max-content width consistently
+ * even when the title is shorter than the widest sibling. */
+div#topLayer .cover_overflow_dropdown .cover_entry > label {
+    flex: 1 1 auto; min-width: 0;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    color: inherit;
+    font-size: 0.875rem; line-height: 1.25rem;
+    cursor: inherit;
+}
+/* Match the default cover_entry's specificity by repeating the nav id, so
+ * the display:none here actually wins. Without the id duplication the
+ * default rule `nav#instantSections .cover_entry { display: inline-flex }`
+ * outranks this one and overflowed entries stay visible. */
+footer#fixedBottom nav#customFixedSections .cover_entry[data-overflowed="1"],
+footer#fixedBottom nav#instantSections .cover_entry[data-overflowed="1"] { display: none; }
+
+/* Top-edge indicator bar — Windows-11 taskbar-style. A pseudo-element sits at
+ * the top of each footer-mounted entry; its width and color reflect the state.
+ * The fixedBottom sits at the bottom of the viewport, so the bar lives on the
+ * *upper* edge of the button (opposite the taskbar). Default state is "open
+ * but inactive" (a cover-bar entry exists iff its embed is open) — the
+ * not-open state is represented by the absence of the entry itself.
+ *   - inactive          : short bar, pale color
+ *   - active            : long bar, accent color
+ *   - minimized         : short bar, dimmed (opacity)
+ *   - minimized+active  : long bar, dimmed (opacity)
+ * Dropdown rows do not carry the indicator — selection there is communicated
+ * with the background highlight only. */
+footer#fixedBottom nav .cover_entry::before {
+    content: "";
+    position: absolute; top: 0; left: 50%;
+    width: 30%; height: 2px;
+    transform: translateX(-50%);
+    background-color: rgb(var(--ca) / 35%);
+    border-radius: 0 0 2px 2px;
+    transition-duration: 0.2s;
+    transition-property: width, background-color, opacity;
+}
+footer#fixedBottom nav .cover_entry[data-active="1"]::before {
+    width: 70%;
+    background-color: var(--color-point-dark, rgb(var(--ca) / 80%));
+}
+footer#fixedBottom nav .cover_entry[data-active="1"] > label { color: var(--color-point-dark, rgb(var(--ca) / 95%)); }
+
+/* Per-entry unread / notification badge — surfaces via [data-badge] on the
+ * entry's .cover_icon so it sits in the icon's top-right corner. Mirrors the
+ * project-wide `article [data-badge]::after` convention (see estreUi.css)
+ * so host themes can override `--badge-color` once and have it apply
+ * everywhere. Cover bar uses a slightly tighter --height than article badges
+ * to suit the 32px icon. Display rules (see #refreshEntryBadge):
+ *   data-badge=""    → dot
+ *   data-badge="<n>" → numeric pill (2 ≤ n ≤ 99)
+ *   data-badge="99+" → cap label
+ *   attribute absent → no badge */
+footer#fixedBottom nav .cover_entry > .cover_icon,
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon { position: relative; }
+
+footer#fixedBottom nav .cover_entry > .cover_icon[data-badge]::after,
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon[data-badge]::after {
+    --height: 14px;
+    --badge-color: var(--color-point);
+    content: attr(data-badge);
+    position: absolute; z-index: 1;
+    top: -2px; right: -6px;
+    display: flex; align-items: center; justify-content: center;
+    width: max-content;
+    min-width: var(--height); min-height: var(--height); max-height: var(--height);
+    padding: 0 4px;
+    box-sizing: border-box;
+    border-radius: var(--height);
+    background-color: var(--badge-color);
+    color: var(--color-text-inverse, #FFFFFF);
+    font-size: 0.625rem; line-height: var(--height); font-weight: 700;
+    text-align: center;
+    pointer-events: none;
+    transition-timing-function: ease;
+    transition-duration: 0.3s;
+}
+footer#fixedBottom nav .cover_entry > .cover_icon[data-badge=""]::after,
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_icon[data-badge=""]::after {
+    top: 0; right: -2px;
+    width: 8px; height: 8px;
+    min-width: 8px; min-height: 8px;
+    aspect-ratio: 1;
+    padding: 0;
+    border-radius: 100%;
+}
+
+/* Per-entry close ✕ — rendered when the entry was pushed with closable:true
+ * (Phase 3 external embed hook). Lives inside the entry button as a span so
+ * the click handler can stopPropagation and route to onAction("close") without
+ * the surrounding row registering as a focus/minimize click. The embed is
+ * responsible for actually removing the entry; the ✕ only signals intent.
+ * Footer tiles deliberately hide the ✕ to stay visually tidy — close is
+ * still reachable via the overflow dropdown row, where the ✕ sits inline at
+ * the trailing edge. */
+footer#fixedBottom nav .cover_entry > .cover_entry_close { display: none; }
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_entry_close {
+    display: inline-flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+    width: 18px; height: 18px;
+    margin-left: 2px;
+    border-radius: 50%;
+    color: var(--color-text-pale, rgb(var(--ca) / 50%));
+    font-size: 0.75rem; line-height: 1;
+    cursor: pointer;
+    transition-duration: 0.15s;
+    transition-property: background-color, color;
+}
+div#topLayer .cover_overflow_dropdown .cover_entry > .cover_entry_close:hover {
+    background-color: rgb(var(--ca) / 15%);
+    color: var(--color-text-darker, rgb(var(--ca) / 95%));
+}
+
+/* Overflow sentinel — narrow chevron button at the leading edge of each area
+ * (right-aligned bars' clipped side). Visibility flips via the `hidden`
+ * attribute from #recomputeOverflow. data-opened mirrors the dropdown's
+ * open state so the sentinel feels pressed while its dropdown is up.
+ * Rendered as a thin column-flex button with a small ^-chevron SVG glued
+ * to the top edge — the chevron points to the overflow dropdown that opens
+ * upward from above. */
+footer#fixedBottom nav .cover_overflow_sentinel {
+    display: inline-flex; flex-flow: column nowrap; align-items: center; justify-content: flex-start;
+    flex-shrink: 0;
+    width: 16px; height: 100%;
+    padding: 6px 0 0 0;
+    border: 0; outline: 0;
+    border-radius: 0;
+    color: var(--color-text-pale, rgb(var(--ca) / 60%));
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    /* Push the sentinel to the trailing edge of its area regardless of DOM
+     * position — entries (default order 0) pack flush to the area's leading
+     * edge, sentinel sits at the trailing end indicating "more this way". */
+    order: 1;
+    transition-duration: 0.15s;
+    transition-property: background-color, color;
+}
+footer#fixedBottom nav .cover_overflow_sentinel > svg { width: 10px; height: 6px; }
+footer#fixedBottom nav .cover_overflow_sentinel:hover { background-color: rgb(var(--ca) / 8%); color: var(--color-text-darker, rgb(var(--ca) / 90%)); }
+footer#fixedBottom nav .cover_overflow_sentinel[data-opened="1"] { color: var(--color-point-dark, rgb(var(--ca) / 95%)); background-color: rgb(var(--ca) / 12%); }
+footer#fixedBottom nav .cover_overflow_sentinel[hidden] { display: none; }
+
+/* Overflow dropdown — mounted in #topLayer, anchored above its sentinel.
+ * Vertical list of cover_entry rows (one per overflowed entry). Chrome
+ * matches the right-click context menu (`.cover_entry_menu`): same
+ * color-mix background wash, backdrop-filter, 1px outset border, and
+ * border-radius. Width sizes to the widest row (max-content) and clamps
+ * to 320px so a long title doesn't push the dropdown past the host.
+ * Positioning is set inline by #positionDropdown. */
+div#topLayer .cover_overflow_dropdown {
+    position: fixed;
+    display: flex; flex-flow: column nowrap;
+    width: max-content; max-width: min(320px, calc(100vw - 16px));
+    padding: 4px 0;
+    border: 1px outset var(--color-boundary-o15);
+    border-radius: 8px;
+    background-color: color-mix(in srgb, var(--common-bg-color) 5%, transparent);
+    backdrop-filter: var(--basic-backdrop-blur);
+    -webkit-backdrop-filter: var(--basic-backdrop-blur);
+    box-shadow: 0 6px 16px rgb(0 0 0 / 14%), 0 1px 4px rgb(0 0 0 / 8%);
+}
+
+/* Context menu — right-click affordance on cover-bar entries. Mounted in
+ * #topLayer so it paints above embed surfaces. Positioned at the cursor
+ * (clamped to the viewport) by #positionContextMenu, which picks a quadrant
+ * (origin corner) so the menu always opens toward viewport center. The
+ * --menu-origin inline custom property drives transform-origin for the
+ * scale-grow open animation. */
+div#topLayer .cover_entry_menu {
+    --menu-origin: top left;
+    position: fixed;
+    display: flex; flex-flow: column nowrap;
+    min-width: 180px; max-width: 280px;
+    padding: 4px 0;
+    border: 1px outset var(--color-boundary-o15);
+    border-radius: 8px;
+    background-color: color-mix(in srgb, var(--common-bg-color) 5%, transparent);
+    backdrop-filter: var(--basic-backdrop-blur);
+    -webkit-backdrop-filter: var(--basic-backdrop-blur);
+    box-shadow: 0 6px 16px rgb(0 0 0 / 14%), 0 1px 4px rgb(0 0 0 / 8%);
+    transform-origin: var(--menu-origin);
+    /* Two-stage open: first 0.2s grows the width (a thin horizontal sliver
+     * around 4~8px tall expands left/right toward full menu width); next 0.2s
+     * grows the height. Total ~0.4s. Origin matches the cursor corner so the
+     * grow unfolds from the click point. */
+    animation: cover_menu_enter 0.4s ease-out;
+}
+div#topLayer .cover_entry_menu[data-closing="1"] {
+    opacity: 0;
+    transform: scale(1);
+    transition: opacity 0.2s ease;
+    animation: none;
+}
+@keyframes cover_menu_enter {
+    0%   { transform: scale(0.15, 0.1); opacity: 0; }
+    50%  { transform: scale(1,    0.1); opacity: 1; }
+    100% { transform: scale(1,    1);   opacity: 1; }
+}
+div#topLayer .cover_entry_menu > header.cover_menu_title {
+    margin: 0 0 4px 0;
+    padding: 6px 12px 6px;
+    border-bottom: 1px solid rgb(var(--ca) / 10%);
+    font-size: 0.75rem; line-height: 1rem;
+    color: var(--color-text-pale, rgb(var(--ca) / 60%));
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+div#topLayer .cover_entry_menu > button.cover_menu_item {
+    display: flex; flex-flow: row nowrap; align-items: center; gap: 8px;
+    width: 100%; margin: 0;
+    padding: 6px 12px;
+    border: 0; outline: 0;
+    background-color: transparent;
+    text-align: left;
+    font-size: 0.875rem; line-height: 1.25rem;
+    color: var(--color-text-darker, rgb(var(--ca) / 95%));
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    transition-duration: 0.15s;
+    transition-property: background-color;
+}
+div#topLayer .cover_entry_menu > button.cover_menu_item > .cover_menu_item_icon { display: inline-flex; flex-shrink: 0; width: 14px; height: 14px; align-items: center; justify-content: center; line-height: 0; color: var(--color-text-pale, rgb(var(--ca) / 60%)); }
+div#topLayer .cover_entry_menu > button.cover_menu_item > .cover_menu_item_icon > svg { width: 14px; height: 14px; display: block; }
+div#topLayer .cover_entry_menu > button.cover_menu_item > .cover_menu_item_label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+div#topLayer .cover_entry_menu > button.cover_menu_item:hover { background-color: rgb(var(--ca) / 8%); }
+div#topLayer .cover_entry_menu > button.cover_menu_item:disabled,
+div#topLayer .cover_entry_menu > button.cover_menu_item[disabled] {
+    color: var(--color-text-pale, rgb(var(--ca) / 50%));
+    cursor: not-allowed;
+}
+div#topLayer .cover_entry_menu > button.cover_menu_item:disabled:hover,
+div#topLayer .cover_entry_menu > button.cover_menu_item[disabled]:hover { background-color: transparent; }
 
 
 /* session manager */

package/styles/estreUiCore2.css

@@ -290,7 +290,31 @@ nav#managedOverlay > section#notification > div.container > article { position:
 nav#managedOverlay > section#notification > div.container > article:not(:is([data-on-top^="1"], [data-on-top^="0"])) { display: none; }
 nav#managedOverlay > section#notification > div.container > article:not([data-on-top="1"]) { opacity: 0; }
 nav#managedOverlay > section#notification > div.container[data-container-id="noti"] { top: var(--top-pad); }
-nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article { top: 32px; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article { top: 0; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-duration: 0.45s; will-change: transform, opacity; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article[data-on-top="1"] { top: 12px; transform: translateY(0); }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article[data-on-top="0"] { top: 12px; transform: translateY(calc(-100% - var(--top-pad) - 12px)); }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block { display: flex; align-items: center; gap: 10px; padding: 10px 14px; max-width: calc(100vw - var(--left-pad) - var(--right-pad) - 16px); min-width: min(320px, calc(100vw - var(--left-pad) - var(--right-pad) - 16px)); box-sizing: border-box; border-radius: 18px; background-color: var(--bg-color); backdrop-filter: var(--basic-backdrop-blur); -webkit-backdrop-filter: var(--basic-backdrop-blur); box-shadow: 1px 4px 8px 2px rgb(var(--ca) / 25%); cursor: pointer; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block:not([data-interactive]) { cursor: default; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .icon_place { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .icon_place > img { width: 100%; height: 100%; object-fit: cover; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place { flex: 1 1 auto; min-width: 0; --color: var(--color-text); --size: 0.9375rem; --weight: 400; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .title_line { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); line-height: 1.25em; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .subtitle_line { font-size: 0.8125rem; font-weight: 400; color: rgb(var(--ca) / 70%); line-height: 1.25em; margin-top: 1px; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .content_area { display: flex; gap: 8px; align-items: flex-start; margin-top: 3px; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .content_area > .content_place { flex: 1 1 auto; min-width: 0; color: var(--color); font-size: var(--size); font-weight: var(--weight); line-height: 1.3em; word-break: break-word; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .content_area > .icon_place { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; overflow: hidden; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block > .content_place > .content_area > .icon_place > img { width: 100%; height: 100%; object-fit: cover; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block { position: relative; z-index: 1; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block.banner_incoming { animation: banner-incoming 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
+nav#managedOverlay > section#notification > div.container[data-container-id="noti"] > article > .post_block.banner_ghost_exit { z-index: 0; animation: banner-ghost-exit 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; pointer-events: none; }
+@keyframes banner-incoming {
+    0%   { opacity: 0; transform: translateY(calc(-100% - var(--top-pad) - 12px)); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+@keyframes banner-ghost-exit {
+    0%   { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(calc(-100% - var(--top-pad) - 12px)); }
+}
 nav#managedOverlay > section#notification > div.container[data-container-id="note"] { bottom: var(--bottom-pad); }
 nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article { bottom: 0; }
 nav#managedOverlay > section#notification > div.container[data-container-id="note"] > article:is([data-on-top^="1"], [data-on-top="0"]) { }

package/vectors/cover-icon-default-instant.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="8" width="20" height="16" rx="2" stroke="#333333" stroke-width="2" stroke-linejoin="round" fill="none"/>
+</svg>

package/vectors/cover-icon-default-overlay.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="10" y="12" width="12" height="8" rx="1.5" stroke="#333333" stroke-width="2" stroke-linejoin="round" fill="none"/>
+</svg>

package/vectors/cover-icon-default-static.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="8" width="20" height="16" rx="2" stroke="#333333" stroke-width="2" stroke-linejoin="round" fill="none"/>
+<line x1="7" y1="12" x2="25" y2="12" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
+<line x1="7" y1="20" x2="25" y2="20" stroke="#333333" stroke-width="2" stroke-linecap="round"/>
+</svg>