/* MP-IRC · Rollende 7-Segment-Uhr, Version 1.3 · Uhr ca. 1,5 mm nach rechts korrigiert
   Separate CSS-Datei: bestehende Chat-Styles bleiben unverändert.
*/
.toolbar {
    position: relative;
    padding-right: 200px;
    min-height: 28px;
}

.mpirc-clock {
    --led: #24dfd1;
    --roll-duration: 2200ms;
    position: absolute;
    right: 22px;
    top: 1px;
    bottom: 1px;
    width: 168px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    padding: 1px 8px;
    overflow: hidden;
    border-left: 1px solid #777;
    background: #10161b;
    font-family: Arial, sans-serif;
    line-height: normal;
}

.mpirc-clock .clock-digit {
    position: relative;
    flex: 0 1 24px;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: #091012;
    border-radius: 2px;
}

.mpirc-clock .clock-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.mpirc-clock .clock-layer.enter { transform: translateY(110%); }
.mpirc-clock .clock-digit.rolling .clock-layer.old {
    animation: mpirc-roll-out var(--roll-duration) cubic-bezier(.45,0,.18,1) forwards;
}
.mpirc-clock .clock-digit.rolling .clock-layer.enter {
    animation: mpirc-roll-in var(--roll-duration) cubic-bezier(.45,0,.18,1) forwards;
}

@keyframes mpirc-roll-out { to { transform: translateY(-110%); } }
@keyframes mpirc-roll-in { to { transform: translateY(0); } }

.mpirc-clock .clock-seven {
    position: relative;
    display: block;
    width: 76%;
    height: 88%;
    filter: drop-shadow(0 0 2px var(--led));
}

.mpirc-clock .clock-seg {
    position: absolute;
    background: #10312f;
    opacity: .45;
}
.mpirc-clock .clock-seg.on {
    background: var(--led);
    opacity: 1;
    box-shadow: 0 0 3px var(--led);
}
.mpirc-clock .clock-seg.h {
    left: 20%; width: 60%; height: 10%;
    clip-path: polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%);
}
.mpirc-clock .clock-seg.v {
    width: 14%; height: 38%;
    clip-path: polygon(50% 0,100% 10%,100% 90%,50% 100%,0 90%,0 10%);
}
.mpirc-clock .clock-seg.a { top: 0; }
.mpirc-clock .clock-seg.g { top: 45%; }
.mpirc-clock .clock-seg.d { bottom: 0; }
.mpirc-clock .clock-seg.f { top: 5%; left: 6%; }
.mpirc-clock .clock-seg.b { top: 5%; right: 6%; }
.mpirc-clock .clock-seg.e { bottom: 5%; left: 6%; }
.mpirc-clock .clock-seg.c { bottom: 5%; right: 6%; }

.mpirc-clock .clock-colon {
    flex: 0 0 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18%;
}
.mpirc-clock .clock-colon i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--led);
    box-shadow: 0 0 4px var(--led);
    animation: mpirc-colon-blink 1s steps(1,end) infinite;
}
@keyframes mpirc-colon-blink {
    0%, 49.99% { opacity: 1; }
    50%, 100% { opacity: .08; }
}

/* Kleine Bildschirme: Uhr bleibt sichtbar, Chat-Bedienelemente erhalten Platz. */
@media (max-width: 700px) {
    .toolbar { padding-right: 134px; }
    .mpirc-clock { right: 20px; width: 110px; gap: 1px; padding: 1px 3px; }
    .mpirc-clock .clock-colon { flex-basis: 5px; }
    .mpirc-clock .clock-colon i { width: 3px; height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .mpirc-clock .clock-digit.rolling .clock-layer.old,
    .mpirc-clock .clock-digit.rolling .clock-layer.enter { animation-duration: .01ms; }
}