/*
 * The floating side panels as frosted-glass capsules, in both themes: the
 * activity panel on the left (scroll arrows, tracker bell and counters) and
 * the comments panel on the right. The templates mark what a panel holds:
 * glass-tools for controls that are always shown, glass-toggler for the
 * sidebar toggler, which only shows below 881px. A panel with neither stays
 * invisible instead of drawing an empty capsule.
 * The ids outrank the generated dark twins; !important is only for the
 * dividers the activity template sets in style="" and the counter colours
 * that .b_reply-to/.b_late-answer set with !important.
 * box-sizing matters: the panel scripts write the measured offsetWidth back
 * as width, which would grow the panel on every update in content-box.
 */

.side-glass {
    --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(236, 243, 250, 0.5));
    --glass-edge: rgba(255, 255, 255, 0.85);
    --glass-shadow: 0 10px 28px rgba(31, 61, 99, 0.18), 0 2px 6px rgba(31, 61, 99, 0.1);
    --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(31, 61, 99, 0.06);
    --glass-divider: rgba(31, 61, 99, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.85);
    --chip-mail: 37, 99, 235;
    --chip-important: 220, 38, 38;
    --chip-regular: 217, 119, 6;
    --chip-delayed: 22, 140, 74;
    --chip-list: 71, 85, 105;
    --glass-icon: rgb(38, 99, 160);

    box-sizing: border-box;
    min-width: 26px;
    padding: 3px 0;
    border: 1px solid transparent;
    border-radius: 13px;
}

html.theme-dark .side-glass {
    --glass-bg: linear-gradient(160deg, rgba(74, 92, 116, 0.55), rgba(24, 31, 41, 0.6));
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    --glass-divider: rgba(255, 255, 255, 0.09);
    --glass-hover: rgba(255, 255, 255, 0.14);
    --chip-mail: 125, 170, 255;
    --chip-important: 255, 120, 120;
    --chip-regular: 251, 176, 70;
    --chip-delayed: 110, 215, 150;
    --chip-list: 190, 204, 222;
    --glass-icon: rgb(170, 200, 232);
}

#activity.side-glass,
#update.side-glass {
    background: transparent;
}

#activity.side-glass.glass-tools,
#update.side-glass.glass-tools {
    border-color: var(--glass-edge);
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow), var(--glass-sheen);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
}

@media (max-width: 880px) {
    #activity.side-glass.glass-toggler,
    #update.side-glass.glass-toggler {
        border-color: var(--glass-edge);
        background: var(--glass-bg);
        box-shadow: var(--glass-shadow), var(--glass-sheen);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        backdrop-filter: blur(16px) saturate(180%);
    }
}

#activity .refresh {
    margin: 0 3px;
    padding: 2px 0 !important;
    border-color: var(--glass-divider) !important;
}

#activity .update-activity {
    padding: 3px 2px;
    border-radius: 7px;
    transition: background-color 0.15s;
}

#activity .update-activity:hover {
    background-color: var(--glass-hover);
}

#activity .refresh[style*="border-top"] {
    border-top: 0 !important;
}

#activity .refresh[style*="border-top"] + #trackerInformer_sidebar {
    margin: 0 3px;
    border-top: 1px solid var(--glass-divider);
}

#activity .new-comments {
    margin: 0 3px;
    border-top-color: var(--glass-divider);
}

#trackerInformerContent_sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#activity .tracker-informer-item {
    --chip: var(--chip-list);
    margin: 0 3px;
    border-top: 1px solid var(--glass-divider);
}

#activity .tracker-informer-item a {
    margin: 0;
    padding: 5px 0;
    border: 0;
    border-radius: 7px;
    font-size: 11px;
    line-height: 14px;
    text-decoration: none;
    color: rgb(var(--chip));
    background: none;
    transition: background-color 0.15s;
}

#activity .tracker-informer-item a:hover {
    background-color: var(--glass-hover);
}

#activity .group-mail {
    --chip: var(--chip-mail);
}

#activity .group-important {
    --chip: var(--chip-important);
}

#activity .group-regular {
    --chip: var(--chip-regular);
}

#activity .group-delayed {
    --chip: var(--chip-delayed);
}

#activity .tracker-list a {
    font-weight: normal;
}

#activity .tracker-bell {
    display: inline-block;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 12px;
    line-height: 13px;
}

#activity #trackerInformer_sidebar .refresh {
    margin: 0;
}

#update .button,
#update .button-img {
    margin: 0 3px;
    padding: 2px 0;
    border-top-color: var(--glass-divider);
}

#update > .button:first-child,
#update > div:first-child > .button:first-child {
    border-top: 0;
}

@media (min-width: 881px) {
    #rightSidebarToggler + div > .button:first-child {
        border-top: 0;
    }
}

#update #new-comments {
    --chip: var(--chip-mail);
}

#update #answers-comments {
    --chip: var(--chip-important);
}

#update #lateanswers-comments {
    --chip: var(--chip-delayed);
}

#update #update_invis .new-comments {
    margin: 0 3px;
    padding: 5px 0;
    border: 0;
    border-top: 1px solid var(--glass-divider);
    border-radius: 0;
    font-size: 11px;
    font-weight: bold;
    line-height: 14px;
    color: rgb(var(--chip)) !important;
    background: none;
    transition: background-color 0.15s;
}

#update #update_invis .new-comments:hover {
    background-color: var(--glass-hover);
}

.side-glass .side-icon {
    display: block;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    padding: 3px 2px;
    border-radius: 7px;
    color: var(--glass-icon);
    cursor: pointer;
    transition: background-color 0.15s;
}

.side-glass .side-link-big .side-icon {
    width: 20px;
    height: 20px;
}

.side-glass .refresh:hover .side-icon,
.side-glass .button:hover .side-icon {
    background-color: var(--glass-hover);
}

#activity a.update-activity {
    display: block;
    padding: 0;
    background: none;
}

#activity #leftSidebarToggler,
#update #rightSidebarToggler {
    padding: 2px 0;
}

#update #update-comments {
    display: none;
}

#update #update-comments[src*="update_act"] + .side-icon {
    animation: side-icon-spin 1s linear infinite;
}

@keyframes side-icon-spin {
    to {
        transform: rotate(360deg);
    }
}