/* Study chronometer chip (mig 244) — the bits Tailwind utilities cannot say:
   the live pulse, the faded breathing dot, the paused look, the hover popover.
   Colours follow the app's light/dark pair; .dark is the html class. */

.timer-chip { position: relative; user-select: none; }
.timer-chip .timer-live {
    width: 6px; height: 6px; border-radius: 99px; background: #22d3ee;
    box-shadow: 0 0 0 0 rgba(34, 211, 238, .55);
    animation: timer-livepulse 2s ease-out infinite;
}
@keyframes timer-livepulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(34, 211, 238, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
.timer-chip .timer-pause { display: none; }
.timer-chip.is-paused .timer-live,
.timer-chip.is-off-page .timer-live { display: none; }
.timer-chip.is-paused .timer-pause { display: inline-flex; }
.timer-chip.is-paused,
.timer-chip.is-off-page { opacity: .62; }
.timer-chip.is-paused [data-timer-time],
.timer-chip.is-off-page [data-timer-time] { color: #64748b; }
.dark .timer-chip.is-paused [data-timer-time],
.dark .timer-chip.is-off-page [data-timer-time] { color: #94a3b8; }

/* goal ring */
.timer-ring circle.timer-track { stroke: rgba(15, 23, 42, .10); }
.dark .timer-ring circle.timer-track { stroke: rgba(255, 255, 255, .10); }
.timer-ring circle.timer-prog {
    stroke: url(#timerRingGrad); stroke-linecap: round;
    transition: stroke-dashoffset .8s ease, opacity .3s;
}
.timer-chip.is-paused .timer-ring circle.timer-prog { stroke: #94a3b8; }

/* faded: a faint breathing dot instead of the number */
.timer-dot { display: none; }
.timer-dot i {
    display: block; width: 9px; height: 9px; border-radius: 99px; background: #64748b;
    opacity: .32; animation: timer-breathe 3.2s ease-in-out infinite;
}
.dark .timer-dot i { background: #94a3b8; }
.timer-dot.is-paused i { animation: none; opacity: .18; }
.timer-dot:hover i { opacity: .7; }
@keyframes timer-breathe {
    0%, 100% { opacity: .22; transform: scale(.9); }
    50%      { opacity: .48; transform: scale(1.08); }
}
[data-timer-wrap].is-faded .timer-chip { display: none; }
[data-timer-wrap].is-faded .timer-dot { display: grid; }

/* popover: hover on pointer devices, .is-open on touch */
.timer-pop {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 260px; z-index: 60;
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .18s, transform .18s;
}
@media (hover: hover) {
    [data-timer-wrap]:hover .timer-pop { opacity: 1; transform: none; pointer-events: auto; }
}
[data-timer-wrap].is-open .timer-pop { opacity: 1; transform: none; pointer-events: auto; }
[data-timer-wrap].is-faded .timer-pop { display: none; }
/* floating corner: the chip sits at the page's physical bottom-LEFT in both
   directions, so the popover anchors to its left edge and opens up + rightward */
.timer-pop-up { top: auto; bottom: calc(100% + 8px); inset-inline-end: auto; inset-inline-start: auto; left: 0; right: auto; }

.timer-row { border: 1px solid transparent; }
.timer-row.is-active { background: rgba(34, 211, 238, .10); border-color: rgba(34, 211, 238, .25); }
.timer-row.is-active .timer-row-label { color: #0e7490; }
.dark .timer-row.is-active .timer-row-label { color: #a5f3fc; }

[data-timer-state] { color: #64748b; background: rgba(15, 23, 42, .05); border: 1px solid rgba(15, 23, 42, .08); }
.dark [data-timer-state] { color: #94a3b8; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .10); }
[data-timer-state].is-live { color: #0e7490; background: rgba(34, 211, 238, .10); border-color: rgba(34, 211, 238, .25); }
.dark [data-timer-state].is-live { color: #a5f3fc; }

/* metallic frame around the chip, same recipe as the rest of the app */
.timer-frame {
    background: linear-gradient(135deg, rgba(15, 23, 42, .18), rgba(15, 23, 42, .03) 45%, rgba(15, 23, 42, .12));
    padding: 1px;
}
.dark .timer-frame {
    background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .16));
}

@media (prefers-reduced-motion: reduce) {
    .timer-chip .timer-live, .timer-dot i { animation: none; }
}