.taskbar {
    align-items: center;
    background: linear-gradient(180deg, #3168d5 0%, #418ae4 8%, #2b6fd1 40%, #1f5ab5 92%, #1941a5 100%);
    bottom: 0; display: none; height: var(--taskbar-height); left: 0;
    position: fixed; width: 100%; z-index: 500; border-top: 1px solid #5a96e0;
}
.taskbar.visible { display: flex; }
.start-button {
    background: linear-gradient(180deg, #3f9b34 0%, #37892c 30%, #2d7d24 60%, #236b1a 100%);
    border: none; height: 100%; padding: 0 14px 0 6px; cursor: pointer;
    display: flex; align-items: center; gap: 4px; border-radius: 0 8px 8px 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    color: #fff; font-family: 'Trebuchet MS', 'Franklin Gothic Medium', Tahoma, sans-serif; font-size: 16px;
    font-weight: 700; font-style: italic; text-shadow: 1px 1px 1px rgba(0,0,0,0.55); letter-spacing: 0.3px;
}
.start-button:hover { filter: brightness(1.08); }
.start-button:active { filter: brightness(0.93); }
.start-flag-img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.taskbar-programs {
    display: flex; align-items: center; flex-grow: 1; height: 100%;
    margin: 0 4px; gap: 3px; overflow: hidden; padding: 3px 0;
}
.taskbar-item {
    align-items: center;
    background: linear-gradient(180deg, #3ba0e7 0%, #3295eb 50%, #3389d4 100%);
    border: 1px solid #0e63ad; border-radius: 3px; color: #fff;
    display: flex; font-family: Tahoma, Arial, sans-serif; font-size: 11px;
    height: 26px; padding: 0 8px; gap: 5px; cursor: pointer;
    max-width: 155px; min-width: 40px; overflow: hidden; white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.taskbar-item.active {
    background: linear-gradient(0deg, #1a5a99 0%, #2176c7 100%);
    border-color: #174a7c; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.35);
}
.taskbar-item .tb-icon {
    align-items: center; display: flex; flex-shrink: 0; font-size: 14px;
    height: 16px; justify-content: center; width: 16px;
}
.taskbar-item .tb-icon img { display: block; height: 16px; object-fit: contain; width: 16px; }
.taskbar-item .tb-text { overflow: hidden; text-overflow: ellipsis; }
.system-tray {
    display: flex; align-items: center;
    background: linear-gradient(180deg, #1290E9 0%, #1070C4 50%, #0C5DAA 100%);
    border-left: 1px solid #0a4a9a; height: 100%; padding: 0 12px; gap: 10px;
}
.tray-icons { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #fff; }
.tray-btn {
    background: none; border: 0; border-radius: 2px; padding: 2px 3px; line-height: 1;
    color: #fff; font-size: 13px; cursor: pointer; opacity: 0.85;
}
.tray-btn:hover, .tray-btn:focus-visible { opacity: 1; background: rgba(255,255,255,0.12); }
.tray-btn:focus-visible { outline: 1px dotted #fff; }
.tray-btn[aria-pressed="false"] { opacity: 0.6; }
.tray-status { position: relative; padding: 2px 3px; opacity: 0.85; cursor: default; }
.tray-status.offline::after {
    content: "x"; position: absolute; right: -1px; bottom: -3px;
    color: #fff; background: #d8261c; border-radius: 50%; width: 10px; height: 10px;
    font: bold 9px/9px Tahoma, sans-serif; text-align: center;
}
.clock {
    color: #fff; font-family: Tahoma, Arial, sans-serif; font-size: 11px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5); white-space: nowrap;
}
.xp-tray-balloon {
    background: #ffffe1;
    border: 1px solid #707070;
    border-radius: 8px;
    bottom: calc(100% + 8px);
    box-shadow: 2px 3px 5px rgba(0,0,0,0.34);
    color: #202020;
    display: block;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.25;
    opacity: 0;
    padding: 8px 10px 10px;
    pointer-events: none;
    position: absolute;
    right: 74px;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    width: 242px;
    z-index: 520;
}
.taskbar.visible .xp-tray-balloon.visible:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.xp-tray-balloon::before,
.xp-tray-balloon::after {
    content: "";
    position: absolute;
}
.xp-tray-balloon::before {
    border-left: 11px solid transparent;
    border-right: 0 solid transparent;
    border-top: 18px solid #707070;
    bottom: -18px;
    right: 18px;
}
.xp-tray-balloon::after {
    border-left: 10px solid transparent;
    border-right: 0 solid transparent;
    border-top: 17px solid #ffffe1;
    bottom: -16px;
    right: 19px;
}
.xp-balloon-title {
    align-items: center;
    display: flex;
    gap: 5px;
    font-weight: 700;
    margin-bottom: 6px;
}
.xp-balloon-title .fa-info-circle {
    color: #2866cf;
    font-size: 13px;
}
.xp-balloon-close {
    background: transparent;
    border: 0;
    color: #555;
    cursor: pointer;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin-left: auto;
    padding: 0 1px;
}
.xp-tray-balloon p {
    margin: 0 0 7px;
}
.xp-balloon-links {
    align-items: center;
    display: flex;
    gap: 5px;
    white-space: nowrap;
}
.xp-balloon-links button {
    background: none;
    border: 0;
    color: #00e;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    padding: 0;
    text-decoration: underline;
}

/* Messenger toast above the tray */
.msn-toast {
    position: fixed; right: 8px; bottom: calc(var(--taskbar-height) + 6px); z-index: 550; width: 218px;
    overflow: hidden; border: 1px solid #5a7bb6; border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35); font: 11px Tahoma, Verdana, Arial, sans-serif;
    transform: translateY(calc(100% + 60px)); transition: transform 0.35s ease-out;
}
.msn-toast.visible { transform: none; }
.msn-toast[hidden] { display: none; }
.msn-toast-head {
    display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 2px 0 6px;
    color: #fff; font-weight: bold; background: linear-gradient(180deg, #739ee8 0%, #3f6cc8 100%);
}
.msn-toast-buddy { width: 14px; height: 14px; background: url('../../../assets/gui/icons/buddy.svg') center / contain no-repeat; }
.msn-toast-close {
    margin-left: auto; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 2px;
    background: none; color: #fff; font: bold 14px/1 Tahoma, sans-serif; cursor: pointer;
}
.msn-toast-close:hover, .msn-toast-close:focus-visible { background: rgba(255,255,255,0.22); outline: none; }
.msn-toast-body {
    display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 10px 8px 12px;
    border: 0; text-align: left; cursor: pointer; color: #1a1a1a; font: inherit; line-height: 1.35;
    background: linear-gradient(180deg, #fff 0%, #e4edfb 100%);
}
.msn-toast-body img { width: 48px; height: 48px; flex-shrink: 0; object-fit: cover; border: 1px solid #9db3d8; border-radius: 3px; }
.msn-toast-body strong { color: #0b47b8; }
.msn-toast-body em { display: block; margin-top: 4px; font-style: normal; color: #2f7d1e; text-decoration: underline; }
.msn-toast-body:hover em, .msn-toast-body:focus-visible em { color: #45a02c; }

/* A taskbar button asking for attention flashes orange, then stays orange until clicked */
.taskbar-item.attention {
    background: linear-gradient(180deg, #f9b54f 0%, #f39a2a 50%, #e1830f 100%);
    border-color: #b5650d; animation: taskbarFlash 0.9s steps(1, end) 6;
}
@keyframes taskbarFlash { 50% { background: linear-gradient(180deg, #3ba0e7 0%, #3295eb 50%, #3389d4 100%); border-color: #0e63ad; } }
@media (prefers-reduced-motion: reduce) {
    .msn-toast { transition: none; }
    .taskbar-item.attention { animation: none; }
}

/* Tray volume control */
.volume-popup {
    position: fixed; z-index: 560; bottom: calc(var(--taskbar-height) + 4px); width: 78px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 7px 8px 9px;
    background: #ece9d8; border: 1px solid #848284; box-shadow: 2px 2px 4px rgba(0,0,0,0.35);
    font: 11px Tahoma, Verdana, Arial, sans-serif; color: #000;
}
.volume-popup[hidden] { display: none; }
.volume-title { align-self: stretch; text-align: center; padding-bottom: 4px; border-bottom: 1px solid #d4d0c8; }
#volume-slider { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 92px; accent-color: #316ac5; cursor: pointer; }
.volume-mute { display: flex; align-items: center; gap: 3px; cursor: pointer; }