/* boot screen */

.boot-screen {
    position: fixed;
    inset: 0;
    background-color: var(--systemBlack);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

.boot-screen.hide {
    opacity: 0;
    visibility: hidden;
}

.boot-screen-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes bootLogoPulse {
    0% {
        transform: scale(1);
        opacity: 0.88;
    }
    50% {
        transform: scale(1.04);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.88;
    }
}


/**/
:root {
    --hover-color: #00000014;
    --active-cover: #00000014;

    --window-controls-close: #FF736A;
    --window-controls-close-active: #e3665d;

    --window-controls-hide: #FEBC2E;
    --window-controls-hide-active: #e4a92a;

    --window-controls-full-screen: #19C332;
    --window-controls-full-screen-active: #16ae2c;
    
    --window-controls-disabled: rgba(0, 0, 0, 0.15);
    --window-controls-border:  rgba(0, 0, 0, 0.1);
}

html, body, * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

img,
a,
svg {
    -webkit-user-drag: none;
    user-drag: none;
}

input,
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

body {
    background-image: url(/vibecoding/img/wallpaper.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    position: relative;

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

    cursor: default;
}


.bg {
    position: fixed;
    z-index: 1;
    inset: 0;
    pointer-events: none;
}

.header-ctnr {
    position: fixed;
    top: var(--systemSpacing-0);
    z-index: 2;
    width: 100%;
    background: #FFFFFF26;
}

.header-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--systemSpacing-2) var(--systemSpacing-8);
}

.group-1-all-wrp, .group-2-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.group-1-list, .group-2-list {
    border-radius: var(--systemSpacing-9999);
    padding: var(--systemSpacing-4) var(--systemSpacing-12);
    cursor: default;
}

.app-name {
    font-size: var(--ch-fontSize);
    color: var(--systemPrimary);
    font-weight: 800;
    letter-spacing: var(--negative-systemSpacing-0_5);
}

.group-list {
    position: relative;
    border-radius: var(--systemSpacing-9999);
    overflow: visible;
}

.group-list::before {
    content: "";
    position: absolute;
    inset: var(--systemSpacing-0) var(--negative-systemSpacing-4);
    background-color: var(--hover-color);
    border-radius: var(--systemSpacing-9999);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.group-list:hover::before {
    opacity: 1;
}

.icon-wrp svg {
    display: block;
    position: relative;
}

/* dropdown */

.dropdown-ctnr {
    position: absolute;
    left: var(--systemSpacing-4);
    top: var(--systemSpacing-32);

    border-radius: var(--systemSpacing-12);

    overflow: hidden;
    background: #f5f5f5a1;

    backdrop-filter: blur(var(--systemSpacing-28)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--systemSpacing-28)) saturate(180%);
    border: var(--systemSpacing-1) solid rgba(255, 255, 255, 0.12);
    box-shadow:
        var(--systemSpacing-0) var(--systemSpacing-8) var(--systemSpacing-40) rgba(0, 0, 0, 0.32),
        inset var(--systemSpacing-0) var(--systemSpacing-1) var(--systemSpacing-0) rgba(255, 255, 255, 0.28),
        inset var(--systemSpacing-0) var(--negative-systemSpacing-1) var(--systemSpacing-0) rgba(255, 255, 255, 0.08);
}



#dropdownCtnr {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

#dropdownCtnr.active {
    opacity: 1;
    visibility: visible;
}

.dropdown-all-wrp {
    padding: var(--systemSpacing-4);
}

.dropdown-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
    padding: var(--systemSpacing-6) var(--systemSpacing-12);
    border-radius: var(--systemSpacing-8);
    width: var(--systemSpacing-240);
}

.dropdown-wrp:hover {
    background-color: var(--systemAccent);
}

.dropdown-wrp:hover .dropdown-txt {
    color: var(--systemWhite);
}

.dropdown-wrp:hover .dropdown-icon-wrp svg {
    fill: var(--systemWhite);
}

.dropdown-icon-wrp svg {
    display: block;
    fill: var(--systemPrimary);
}

.dropdown-txt {
    color: var(--systemPrimary);
    font-size: var(--c1-fontSize);
    font-weight: 500;
}

.dropdown-divider {
    border: 0.1px solid #cfcfcf54;
    mix-blend-mode: plus-darker;
    margin: var(--systemSpacing-4) var(--systemSpacing-0);
}

/* group 2*/

.group-2-list-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: visible;
}

.time-date-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
}

.time, .date {
    color: var(--systemPrimary);
    font-size: var(--ch-fontSize);
    font-weight: 600;
}

.date {
    letter-spacing: var(--negative-systemSpacing-0_5);
}


/* notification centre */

.notification-centre-ctnr {
    position: fixed;
    /* width: var(--systemSpacing-360); */
    top: var(--systemSpacing-40);
    right: var(--systemSpacing-20);

    transform: translateX(120%);
    transition: transform 0.45s cubic-bezier(.25,.8,.25,1);

    z-index: 2147483647;
}

.notification-centre-ctnr.active {
    transform: translateX(0);
}

.tl-close-btn-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin-bottom: var(--systemSpacing-12);
}

.notification-centre-tl {
    font-size: var(--hl-fontSize);
    font-weight: 700;
    color: var(--systemWhite);
    cursor: default;

    text-shadow: var(--systemSpacing-0) var(--systemSpacing-8) var(--systemSpacing-40) rgba(0, 0, 0, 0.32);
}

.close-btn {
    padding: var(--systemSpacing-0);
    margin: var(--systemSpacing-0);
    
    border-radius: var(--systemSpacing-9999);
}

.close-btn:hover {
    opacity: 80%;
}

.close-btn svg {
    display: block;
    fill: var(--systemWhite);
}

.notification-centre-ctnr {
    position: fixed;
    z-index: 2147483647; /* max */
}

.notification-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-8);
}

.notification-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--systemSpacing-12);
    padding: var(--systemSpacing-12) var(--systemSpacing-12) var(--systemSpacing-12) var(--systemSpacing-12);
    border-radius: var(--systemSpacing-20);

    overflow: hidden;
    background: #f5f5f5a1;
    backdrop-filter: blur(var(--systemSpacing-28)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--systemSpacing-28)) saturate(180%);
    border: var(--systemSpacing-1) solid rgba(255, 255, 255, 0.12);
    box-shadow:
        var(--systemSpacing-0) var(--systemSpacing-8) var(--systemSpacing-40) rgba(0, 0, 0, 0.32),
        inset var(--systemSpacing-0) var(--systemSpacing-1) var(--systemSpacing-0) rgba(255, 255, 255, 0.28),
        inset var(--systemSpacing-0) var(--negative-systemSpacing-1) var(--systemSpacing-0) rgba(255, 255, 255, 0.08);
}

.notification-wrp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.02) 100%); */
    pointer-events: none;
}

.notification-wrp::after {
    content: "";
    position: absolute;
    inset: var(--systemSpacing-1);
    border-radius: var(--systemSpacing-16);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.app-icon {
    width: var(--systemSpacing-36);
}

.app-icon img {
    display: block;
    max-width: 100%;
    border-radius: var(--systemSpacing-10);
}

.notification-txt-wrp {
    display: flex;
    flex-direction: column;
    width: var(--systemSpacing-240);
    gap: var(--systemSpacing-4);
}

.notification-tl, .notification-dsc {
    font-size: var(--ch-fontSize);
    color: var(--systemPrimary);
    line-height: 110%;
}

.notification-tl {
    font-weight: 700;
}

.notification-dsc {
    font-weight: 400;
}

.notification-date {
    font-size: var(--c1-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
    width: fit-content;
    white-space: nowrap;
}

/* about this project */

/* window controls */

.window-controls-ctnr {
    top: var(--systemSpacing-8);
    left: var(--systemSpacing-8);
}

.window-controls-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
    padding: var(--systemSpacing-12) var(--systemSpacing-8) var(--systemSpacing-8) var(--systemSpacing-12);
    width: fit-content;
}

.window-controls {
    width: var(--systemSpacing-14);
    height: var(--systemSpacing-14);
    border-radius: var(--systemSpacing-9999);
    border: var(--systemSpacing-1) solid var(--window-controls-border);
}

/**/


.close-svg, .hide-svg, .full-screen-svg, .minimize-screen-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    fill: var(--systemTertiary);
    opacity: 0;
}


/*tq*/


/*tq*/

/**/

.window-controls-close {
    background-color: var(--window-controls-close);
    position: relative;
}

.window-controls-close:active {
    background-color: var(--window-controls-close-active);
}

.window-controls-all-wrp:hover .close-svg {
    opacity: 1;
}



.window-controls-hide {
    background-color: var(--window-controls-hide);
    position: relative;
}

.window-controls-hide:active {
    background-color: var(--window-controls-hide-active);
}

.window-controls-all-wrp:hover .hide-svg {
    opacity: 1;
}


/**/

.window-controls-full-screen {
    background-color: var(--window-controls-full-screen);
    position: relative;
}

.window-controls-full-screen:active {
    background-color: var(--window-controls-full-screen-active);
}

.bg-sheet-lg:not(.fullscreen)
.window-controls-all-wrp:hover .full-screen-svg {
    opacity: 1;
}

.bg-sheet-lg.fullscreen
.window-controls-all-wrp:hover .minimize-screen-svg {
    opacity: 1;
}


.window-controls-disabled {
    background-color: var(--systemQuinary);
}

/* background sheet small */

.bg-sheet-sm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--systemSpacing-16);
    background: var(--systemWhite);
    box-shadow: var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-1) rgba(0, 0, 0, 0.23), var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-48) 0 rgba(0, 0, 0, 0.35);

    width: var(--systemSpacing-280);
    height: var(--systemSpacing-480);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/**/

.about-this-proj-ctnr.active {
    opacity: 1;
    pointer-events: auto;
}

.about-this-proj-all-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-20);
    
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.vibecoding-txt-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-4);
}

.vibecoding-tl, .about-eg-tl {
    font-size: var(--h6-fontSize);
    color: var(--systemPrimary);
    font-weight: 700;
    letter-spacing: var(--negative-systemSpacing-1);
}

.vibecoding-dsc {
    font-size: var(--c2-fontSize);
    color: var(--systemQuaternary);
    font-weight: 400;
}

/* about eugene */

.about-eg-ctnr.active {
    opacity: 1;
    pointer-events: auto;
}

.about-eg-all-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-20);
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.about-eg-img-txt-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-8);
}

.about-eg-img-txt-wrp .img-wrp {
    width: var(--systemSpacing-120);
}

.about-eg-img-txt-wrp .img-wrp img {
    border-radius: var(--systemSpacing-9999);
}

.about-eg-txt-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-4);
}

.about-eg-dsc {
    font-size: var(--ch-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
    white-space: nowrap;
}

.more-about-eg-all-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-40);
}

.more-about-eg-info-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--systemSpacing-2);
}

.info-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-12);
}

.info-tl, .info-dsc {
    font-size: var(--c1-fontSize);
    width: var(--systemSpacing-100);
    letter-spacing: var(--negative-systemSpacing-0_5);
}

.info-tl {
    color: var(--systemPrimary);
    font-weight: 500;
    text-align: right;
}

.info-dsc {
    color: var(--systemTertiary);
    font-weight: 400;
    text-align: left;
}

.more-about-eg {
    font-size: var(--ch-fontSize);
    font-weight: 500;
    color: var(--systemPrimary);
    background-color: var(--systemBG-primary);
    padding: var(--systemSpacing-8) var(--systemSpacing-16);
    border-radius: var(--systemSpacing-8);
}

.more-about-eg:active  {
    background-color: var(--systemBG-secondary);
    cursor: default;
}

/* click pop */

.bg-sheet-lg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--systemSpacing-16);
    background: var(--systemWhite);
    box-shadow: var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-1) rgba(0, 0, 0, 0.23), var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-48) 0 rgba(0, 0, 0, 0.35);

    width: var(--systemSpacing-1200);
    height: var(--systemSpacing-720);

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.click-pop-ctnr.active {
    opacity: 1;
    pointer-events: auto;
}

.click-pop-ctnr.fullscreen {
    border-radius: var(--systemSpacing-0);
}

#clickPopCtnr {
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s ease;
    transform-origin: center center;
    visibility: hidden;
}

#clickPopCtnr.active {
    visibility: visible;
}

.click-pop-all-wrp {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* #clickPopCtnr.app-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

#clickPopCtnr.app-hiding {
    opacity: 0;
    pointer-events: none;
} */


/* dock */

.dock-ctnr {
    position: absolute;
    bottom: var(--systemSpacing-12);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5000;

    background: rgba(246, 246, 246, 0.20);
    border: var(--systemSpacing-1) solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(var(--systemSpacing-120));
    -webkit-backdrop-filter: blur(var(--systemSpacing-32)) saturate(1.3);
    border-radius: var(--systemSpacing-28);
    box-shadow: var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-8) var(--systemSpacing-0) var(--systemQuinary);
}

.dock-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
    padding: var(--systemSpacing-12) var(--systemSpacing-20);
}

.dock-icon-wrp {
    width: var(--systemSpacing-60);

    position: relative;
    display: flex;
    align-items: flex-end;
}

.dock-icon-wrp img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    border: 1px solid rgba(255,255,255,0.3);

    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.3),
    0 10px 30px rgba(0,0,0,0.2);
    border-radius: var(--systemSpacing-16);
}

.dock-label {
    position: absolute;
    bottom: var(--systemSpacing-80);
    left: 50%;
    transform: translateX(-50%);

    background: rgba(255, 255, 255, 0.48);
    background-blend-mode: plus-darker, normal, color-dodge;
    box-shadow: var(--systemSpacing-0) var(--systemSpacing-8) var(--systemSpacing-40) 0 rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(var(--systemSpacing-60));

    font-size: var(--c1-fontSize);
    white-space: nowrap;
    padding: var(--systemSpacing-4) var(--systemSpacing-12);
    border-radius: var(--systemSpacing-9999);

    opacity: 0;
    pointer-events: none;
    z-index: 5001;
}

.dock-icon-wrp:hover .dock-label {
    opacity: 1;
}

/* app running */

#clickPopBtn {
    position: relative;
    overflow: visible;
}

#clickPopBtn .dock-running-dot {
        position: absolute;
    left: 50%;
    bottom: var(--negative-systemSpacing-8);
    transform: translateX(-50%);
    width: var(--systemSpacing-6);
    height: var(--systemSpacing-6);
    border-radius: var(--systemSpacing-9999);
    background: var(--systemSecondary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

#clickPopBtn.running .dock-running-dot {
    opacity: 1;
}

#clickPopBtn.dock-bounce {
    animation: dockBounce 1s ease;
}

@keyframes dockBounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0);
    }
}