
:root{
    --pm-blue:var(--app-blue,#2864ed);
    --pm-blue-dark:var(--app-blue-dark,#174ebc);
    --pm-text:#101828;
    --pm-muted:#667085;
    --pm-border:var(--app-border,#e1e7ef);
    --pm-surface:#fff;
    --pm-soft:#f6f8fb;
    --pm-shadow:0 16px 42px rgba(16,24,40,.14);
}

#svsPomodoroMini{
    bottom:18px;
    display:block;
    left:auto;
    position:fixed;
    right:18px;
    z-index:9500;
}

#svsPomodoroMini[hidden]{
    display:none!important;
}

#svsPomodoroMini .pm-launcher{
    align-items:center;
    background:linear-gradient(135deg,var(--pm-blue-dark),var(--pm-blue));
    border:0;
    border-radius:999px;
    box-shadow:0 12px 30px rgba(40,100,237,.24);
    color:#fff;
    cursor:pointer;
    display:flex;
    gap:9px;
    margin-left:auto;
    min-height:46px;
    padding:10px 15px;
}

#svsPomodoroMini .pm-launcher svg{
    height:20px;
    width:20px;
}

#svsPomodoroMini .pm-launcher-text{
    display:grid;
    line-height:1.05;
    text-align:left;
}

#svsPomodoroMini .pm-launcher-text b{
    font-size:.78rem;
}

#svsPomodoroMini .pm-launcher-text small{
    font-size:.61rem;
    opacity:.82;
}

#svsPomodoroMini .pm-panel{
    background:var(--pm-surface);
    border:1px solid var(--pm-border);
    border-radius:22px;
    bottom:0;
    box-shadow:var(--pm-shadow);
    display:none;
    min-width:290px;
    overflow:hidden;
    position:absolute;
    right:0;
    width:min(350px,calc(100vw - 24px));
}

#svsPomodoroMini.is-open .pm-panel{
    display:block;
}

#svsPomodoroMini.is-open .pm-launcher{
    display:none;
}

#svsPomodoroMini .pm-head{
    align-items:flex-start;
    background:#fff;
    border-bottom:1px solid var(--pm-border);
    color:var(--pm-text);
    display:flex;
    justify-content:space-between;
    padding:16px 16px 14px;
}

#svsPomodoroMini .pm-head>div{
    display:grid;
    gap:3px;
}

#svsPomodoroMini .pm-head small{
    color:var(--pm-blue-dark);
    font-size:.62rem;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#svsPomodoroMini .pm-head strong{
    color:var(--pm-text);
    font-size:1rem;
    letter-spacing:-.02em;
}

#svsPomodoroMini .pm-collapse{
    align-items:center;
    background:#edf4ff;
    border:0;
    border-radius:11px;
    color:var(--pm-blue-dark);
    cursor:pointer;
    display:flex;
    font-size:1rem;
    height:36px;
    justify-content:center;
    width:36px;
}

#svsPomodoroMini .pm-body{
    display:grid;
    gap:14px;
    padding:16px;
}

#svsPomodoroMini .pm-status{
    align-items:center;
    background:var(--pm-soft);
    border:1px solid var(--pm-border);
    border-radius:17px;
    display:grid;
    gap:13px;
    grid-template-columns:auto 1fr;
    padding:12px;
}

#svsPomodoroMini .pm-clock{
    align-items:center;
    background:#fff;
    border:1px solid var(--pm-border);
    border-radius:15px;
    color:var(--pm-blue-dark);
    display:flex;
    font-size:1.5rem;
    font-variant-numeric:tabular-nums;
    font-weight:950;
    height:66px;
    justify-content:center;
    min-width:108px;
    padding:0 12px;
    letter-spacing:-.04em;
}

#svsPomodoroMini .pm-copy{
    display:grid;
    gap:4px;
}

#svsPomodoroMini .pm-copy b{
    color:var(--pm-text);
    font-size:.86rem;
}

#svsPomodoroMini .pm-copy small{
    color:var(--pm-muted);
    font-size:.68rem;
    line-height:1.4;
}

#svsPomodoroMini .pm-actions{
    display:grid;
    gap:9px;
    grid-template-columns:1fr 1fr;
}

#svsPomodoroMini .pm-actions button,
#svsPomodoroMini .pm-actions a{
    align-items:center;
    border:0;
    border-radius:13px;
    cursor:pointer;
    display:flex;
    font-size:.72rem;
    font-weight:950;
    justify-content:center;
    min-height:42px;
    padding:10px 12px;
    text-decoration:none;
}

#svsPomodoroMini .pm-actions button{
    background:#edf4ff;
    color:var(--pm-blue-dark);
}

#svsPomodoroMini .pm-actions a{
    background:var(--pm-blue);
    color:#fff;
}

#svsPomodoroMini.is-active .pm-panel{
    border-color:rgba(40,100,237,.24);
}

#svsPomodoroMini.is-active .pm-status{
    background:#f8fbff;
}

#svsPomodoroMini.is-active .pm-clock{
    color:var(--pm-blue);
}

@media(max-width:780px){
    #svsPomodoroMini{
        bottom:82px;
        left:12px;
        right:12px;
    }

    #svsPomodoroMini .pm-panel{
        left:0;
        right:0;
        width:100%;
    }
}


#svsPomodoroMini .pm-alert{
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--pm-border);
    border-radius:15px;
    box-shadow:0 14px 34px rgba(16,24,40,.14);
    bottom:58px;
    display:grid;
    gap:2px;
    max-width:330px;
    padding:11px 13px;
    position:absolute;
    right:0;
    width:max-content;
}

#svsPomodoroMini .pm-alert[hidden]{
    display:none!important;
}

#svsPomodoroMini .pm-alert strong{
    color:var(--pm-text);
    font-size:.74rem;
}

#svsPomodoroMini .pm-alert span{
    color:var(--pm-muted);
    font-size:.65rem;
    line-height:1.35;
}

#svsPomodoroMini .pm-alert.is-work{
    background:#f8fbff;
    border-color:rgba(40,100,237,.20);
}

#svsPomodoroMini .pm-alert.is-break{
    background:#fff8ea;
    border-color:rgba(247,144,9,.30);
}

#svsPomodoroMini.is-work-complete .pm-launcher{
    box-shadow:
        0 0 0 6px rgba(40,100,237,.10),
        0 12px 30px rgba(40,100,237,.24);
}

#svsPomodoroMini.is-break-complete .pm-launcher{
    background:linear-gradient(135deg,#f79009,#fdb022);
    box-shadow:
        0 0 0 8px rgba(247,144,9,.13),
        0 12px 30px rgba(247,144,9,.24);
    animation:pm-break-pulse 1.8s ease-in-out infinite;
}

#svsPomodoroMini.is-break-complete .pm-panel{
    border-color:rgba(247,144,9,.32);
}

#svsPomodoroMini.is-break-complete .pm-status{
    background:#fffaf2;
}

#svsPomodoroMini.is-break-complete .pm-clock{
    color:#b54708;
}

@keyframes pm-break-pulse{
    0%,100%{
        transform:translateY(0);
        box-shadow:
            0 0 0 7px rgba(247,144,9,.10),
            0 12px 30px rgba(247,144,9,.24);
    }
    50%{
        transform:translateY(-2px);
        box-shadow:
            0 0 0 11px rgba(247,144,9,.05),
            0 16px 34px rgba(247,144,9,.28);
    }
}

@media(max-width:780px){
    #svsPomodoroMini .pm-alert{
        bottom:58px;
        left:0;
        max-width:none;
        right:0;
        width:auto;
    }
}

@media(prefers-reduced-motion:reduce){
    #svsPomodoroMini.is-break-complete .pm-launcher{
        animation:none;
    }
}
