/* =========================================================
   XERION — VELYN WIDGET
   Clean light interface
========================================================= */


/* =========================================================
   BASE
========================================================= */

.velyn-floating-widget,
.velyn-floating-widget * {
    box-sizing: border-box;
}

.velyn-floating-widget {
    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 360px;
    max-width: calc(100vw - 32px);

    border: 1px solid #dfe4eb;
    border-radius: 18px;

    background: #ffffff;
    color: #111827;

    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.14);

    overflow: hidden;

    z-index: 1200;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.velyn-floating-widget.is-hidden {
    display: none;
}


/* =========================================================
   HEADER
========================================================= */

.velyn-widget-header {
    width: 100%;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 13px 0 17px;

    border-bottom: 1px solid #e8ebef;

    background: #ffffff;
}

.velyn-widget-brand {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}

.velyn-widget-brand img {
    width: 23px;
    height: 23px;

    flex-shrink: 0;

    object-fit: contain;
}

.velyn-widget-brand span {
    color: #111827;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.velyn-widget-close {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #7b8494;

    font-family: inherit;
    font-size: 19px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    appearance: none;

    transition:
        background 140ms ease,
        color 140ms ease;
}

.velyn-widget-close:hover {
    background: #f3f5f8;
    color: #111827;
}

.velyn-widget-close:active {
    background: #eceff3;
}

.velyn-widget-close:focus-visible {
    outline: 2px solid #536cff;
    outline-offset: 2px;
}


/* =========================================================
   BODY
========================================================= */

.velyn-widget-body {
    width: 100%;

    padding: 26px 24px 23px;

    background: #ffffff;
}


/* =========================================================
   CONNECT STATE
========================================================= */

.velyn-widget-connect-state {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.velyn-widget-connect-state.is-hidden {
    display: none;
}


/* =========================================================
   CONNECT ICON
========================================================= */

.velyn-widget-connect-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 15px;

    border: 1px solid #e1e6ed;
    border-radius: 13px;

    background: #f7f8fa;
    color: #536cff;
}

.velyn-widget-connect-icon svg {
    width: 21px;
    height: 21px;
}


/* =========================================================
   CONNECT TEXT
========================================================= */

.velyn-widget-connect-title {
    margin: 0;

    color: #111827;

    font-size: 17px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.025em;
}

.velyn-widget-connect-description {
    width: 100%;
    max-width: 290px;

    margin: 7px auto 20px;

    color: #737d8e;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   LOGIN FORM
========================================================= */

.velyn-widget-login-form {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 13px;

    margin: 0;
    padding: 0;
}

.velyn-widget-login-field {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 6px;

    text-align: left;
}

.velyn-widget-login-field label {
    display: block;

    margin: 0;

    color: #4b5565;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.2;
}

.velyn-widget-login-field input,
#velynWidgetEmail,
#velynWidgetPassword {
    width: 100%;
    height: 42px;

    display: block;

    margin: 0;
    padding: 0 12px;

    border: 1px solid #dbe1e8;
    border-radius: 9px;

    outline: none;

    background: #ffffff;
    color: #111827;

    font-family: inherit;
    font-size: 12px;
    font-weight: 400;

    line-height: 42px;

    appearance: none;

    box-shadow: none;

    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
}

.velyn-widget-login-field input::placeholder {
    color: #a0a8b5;
}

.velyn-widget-login-field input:hover {
    border-color: #cbd2dc;
}

.velyn-widget-login-field input:focus {
    border-color: #536cff;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(83, 108, 255, 0.10);
}


/* =========================================================
   BROWSER AUTOFILL
========================================================= */

.velyn-widget-login-field input:-webkit-autofill,
.velyn-widget-login-field input:-webkit-autofill:hover,
.velyn-widget-login-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827;

    box-shadow:
        0 0 0 1000px #ffffff inset,
        0 0 0 3px rgba(83, 108, 255, 0.00);

    transition:
        background-color 9999s ease-in-out 0s;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.velyn-widget-login-button,
#velynWidgetLoginButton {
    width: 100%;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 3px 0 0;
    padding: 0 16px;

    border: 0;
    border-radius: 9px;

    background: #536cff;
    color: #ffffff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    appearance: none;

    box-shadow: none;

    transition:
        background 140ms ease,
        transform 140ms ease,
        opacity 140ms ease;
}

.velyn-widget-login-button:hover,
#velynWidgetLoginButton:hover {
    background: #465fe8;

    transform: translateY(-1px);
}

.velyn-widget-login-button:active,
#velynWidgetLoginButton:active {
    background: #4057d5;

    transform: translateY(0);
}

.velyn-widget-login-button:disabled,
#velynWidgetLoginButton:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;
}

.velyn-widget-login-button:focus-visible,
#velynWidgetLoginButton:focus-visible {
    outline: 2px solid #536cff;
    outline-offset: 3px;
}


/* =========================================================
   LOGIN MESSAGE
========================================================= */

.velyn-widget-login-message {
    width: 100%;

    min-height: 16px;

    margin: 9px 0 0;

    color: #d04b4b;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.4;

    text-align: center;
}

.velyn-widget-login-message:empty {
    display: none;
}


/* =========================================================
   DIVIDER
========================================================= */

.velyn-widget-or {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    margin: 18px 0 12px;

    color: #9aa3b1;

    font-size: 10px;
    font-weight: 500;
}

.velyn-widget-or::before,
.velyn-widget-or::after {
    content: "";

    height: 1px;

    flex: 1;

    background: #e8ebef;
}


/* =========================================================
   OPEN VELYN
========================================================= */

.velyn-widget-open-button,
#velynWidgetOpenVelynButton {
    width: 100%;
    height: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0 14px;

    border: 1px solid #dbe1e8;
    border-radius: 9px;

    background: #ffffff;
    color: #303847;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    appearance: none;

    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

.velyn-widget-open-button:hover,
#velynWidgetOpenVelynButton:hover {
    border-color: #cbd2dc;

    background: #f7f8fa;
    color: #111827;
}

.velyn-widget-open-button:focus-visible,
#velynWidgetOpenVelynButton:focus-visible {
    outline: 2px solid #536cff;
    outline-offset: 3px;
}


/* =========================================================
   ACCOUNT NOTE
========================================================= */

.velyn-widget-account-note {
    max-width: 285px;

    margin: 14px auto 0;

    color: #929aa8;

    font-size: 9px;
    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   FOCUS STATE
========================================================= */

.velyn-widget-focus-state {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.velyn-widget-focus-state.is-hidden {
    display: none;
}


/* =========================================================
   STATUS
========================================================= */

.velyn-widget-status {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #7b8495;

    font-size: 10px;
    font-weight: 600;

    line-height: 1;
}

.velyn-widget-status-dot {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #9aa3b2;
}


/* =========================================================
   TIMER
========================================================= */

.velyn-widget-timer {
    width: 100%;

    margin-top: 14px;

    color: #536cff;

    font-size: 58px;
    font-weight: 750;

    line-height: 0.95;

    letter-spacing: -0.06em;

    text-align: center;
}

.velyn-widget-session {
    margin-top: 9px;

    color: #7b8495;

    font-size: 10px;
    font-weight: 500;

    line-height: 1;
}


/* =========================================================
   DURATIONS
========================================================= */

.velyn-widget-durations {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 20px;
}

.velyn-widget-duration {
    width: 60px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #dfe4ea;
    border-radius: 9px;

    background: #f7f8fa;
    color: #707a8a;

    font-family: inherit;
    font-size: 10px;
    font-weight: 650;

    cursor: pointer;

    appearance: none;

    transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

.velyn-widget-duration:hover {
    border-color: #cbd2dc;

    background: #f1f3f6;

    color: #303847;
}

.velyn-widget-duration.is-active {
    border-color: #536cff;

    background: #536cff;
    color: #ffffff;
}


/* =========================================================
   SESSION BUTTON
========================================================= */

.velyn-widget-button {
    width: 100%;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 17px;

    padding: 0;

    border: 0;
    border-radius: 9px;

    background: #536cff;
    color: #ffffff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    appearance: none;

    transition:
        background 140ms ease,
        transform 140ms ease,
        opacity 140ms ease;
}

.velyn-widget-button:hover {
    background: #465fe8;

    transform: translateY(-1px);
}

.velyn-widget-button:active {
    transform: translateY(0);
}

.velyn-widget-button:disabled {
    opacity: 0.45;

    cursor: not-allowed;

    transform: none;
}


/* =========================================================
   PROGRESS
========================================================= */

.velyn-widget-progress {
    width: 100%;
    height: 4px;

    margin-top: 16px;

    border-radius: 999px;

    background: #e8ecf1;

    overflow: hidden;
}

.velyn-widget-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #536cff;

    transition: width 300ms ease;
}


/* =========================================================
   STATS
========================================================= */

.velyn-widget-stats {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 15px;
    padding-top: 13px;

    border-top: 1px solid #e9ecf1;
}

.velyn-widget-stat {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;
}

.velyn-widget-stat-label {
    color: #9aa3b2;

    font-size: 8px;
    font-weight: 650;

    line-height: 1;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.velyn-widget-stat-value {
    color: #344054;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;
}

.velyn-widget-stat-value.is-xp {
    color: #536cff;
}

.velyn-widget-stat-value.is-streak {
    color: #d79c2b;
}


/* =========================================================
   CONNECTED ACCOUNT
========================================================= */

.velyn-widget-account {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 15px;
    padding-top: 13px;

    border-top: 1px solid #e9ecf1;
}

.velyn-widget-account-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;

    text-align: left;
}

.velyn-widget-account-label {
    color: #9aa3b2;

    font-size: 8px;
    font-weight: 650;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.velyn-widget-account-email {
    max-width: 190px;

    overflow: hidden;

    color: #4b5565;

    font-size: 9px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.velyn-widget-disconnect {
    flex-shrink: 0;

    padding: 6px 8px;

    border: 0;

    background: transparent;
    color: #8b94a3;

    font-family: inherit;
    font-size: 9px;
    font-weight: 600;

    cursor: pointer;
}

.velyn-widget-disconnect:hover {
    color: #d04b4b;
}


/* =========================================================
   STATES
========================================================= */

.velyn-floating-widget.is-running
.velyn-widget-status {
    color: #39a96b;
}

.velyn-floating-widget.is-running
.velyn-widget-status-dot {
    background: #43c47a;
}

.velyn-floating-widget.is-paused
.velyn-widget-status {
    color: #c28c25;
}

.velyn-floating-widget.is-paused
.velyn-widget-status-dot {
    background: #e0aa3f;
}

.velyn-floating-widget.is-completed
.velyn-widget-status {
    color: #39a96b;
}

.velyn-floating-widget.is-completed
.velyn-widget-status-dot {
    background: #43c47a;
}

.velyn-floating-widget.is-completed
.velyn-widget-timer {
    color: #43b977;
}


/* =========================================================
   LOADING
========================================================= */

.velyn-floating-widget.is-loading {
    pointer-events: none;
}

.velyn-floating-widget.is-loading .velyn-widget-body {
    opacity: 0.65;
}


/* =========================================================
   MINIMIZED
========================================================= */

.velyn-floating-widget.is-minimized {
    width: auto;
    min-width: 0;

    border-radius: 999px;
}

.velyn-floating-widget.is-minimized .velyn-widget-header {
    height: 44px;

    padding:
        0
        8px
        0
        13px;

    border-bottom: 0;
}

.velyn-floating-widget.is-minimized .velyn-widget-body {
    display: none;
}


/* =========================================================
   PAGE WIDGET
========================================================= */

.velyn-page-widget {
    width: 100%;
}

.velyn-floating-widget.is-page-widget {
    position: relative;

    right: auto;
    bottom: auto;

    width: 100%;
    max-width: none;

    box-shadow:
        0 3px 12px rgba(15, 23, 42, 0.035);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .velyn-floating-widget {
        right: 14px;
        bottom: 78px;

        width: 340px;
        max-width: calc(100vw - 28px);
    }

}

@media (max-width: 420px) {

    .velyn-floating-widget {
        right: 10px;
        bottom: 70px;

        width: calc(100vw - 20px);
        max-width: none;

        border-radius: 16px;
    }

    .velyn-widget-body {
        padding:
            23px
            17px
            20px;
    }

    .velyn-widget-timer {
        font-size: 52px;
    }

    .velyn-widget-duration {
        width: 56px;
    }

}

@media (max-width: 350px) {

    .velyn-floating-widget {
        right: 7px;
        bottom: 64px;

        width: calc(100vw - 14px);
    }

    .velyn-widget-body {
        padding-left: 14px;
        padding-right: 14px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .velyn-floating-widget,
    .velyn-floating-widget *,
    .velyn-floating-widget *::before,
    .velyn-floating-widget *::after {
        transition: none !important;
        animation: none !important;
    }

}