/* =====================================================
   HEARTBEAT // STYLES
   Layout, colors, fonts, animations and responsive design
   ===================================================== */


/* =========================
   FONT
   ========================= */

@import url(
    'https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700&display=swap'
);


/* =========================
   GLOBAL PAGE
   ========================= */

/* Include borders and padding inside element dimensions. */
* {
    box-sizing: border-box;
}


/* Main page appearance. */
html,
body {
    margin: 0;
    padding: 0;

    background: #030711;
    color: white;

    font-family: "Courier New", monospace;
}


/* =========================
   MAIN PICTURE
   ========================= */

/* Display the complete image at a smaller size. */
.hero {
    width: 100%;

    background: #030711;

    line-height: 0;

    text-align: center;
}


/* Preserve the complete picture without cropping. */
.hero img {
    display: block;

    width: 80%;
    height: auto;

    margin: 0 auto;
}


/* =========================
   SIDE TELEMETRY
   ========================= */

/* Shared appearance for NYC and OSLO telemetry. */
.telemetry {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 8%;

    color: #3f7dab;

    font-family: "Courier New", monospace;
    font-size: 7px;

    line-height: 1.7;
    letter-spacing: 0.5px;

    opacity: 0.55;

    white-space: nowrap;
}


/* NYC telemetry — centered in left margin. */
.telemetry-left {
    left: 1%;

    text-align: center;
}


/* OSLO telemetry — centered in right margin. */
.telemetry-right {
    right: 1%;

    text-align: center;
}


/* NODE headings. */
.telemetry-node {
    margin-bottom: 10px;

    color: #168cff;

    font-size: 8px;
    letter-spacing: 1px;

    text-shadow:
        0 0 5px rgba(22, 140, 255, 0.4);
}


/* Decorative vertical telemetry line. */
.telemetry-line {
    width: 1px;
    height: 55px;

    margin: 12px auto;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #168cff,
            transparent
        );

    opacity: 0.4;
}




/* =========================
   HEARTBEAT CONSOLE
   ========================= */

/* Main control area underneath the image. */
.heartbeat-console {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #07111f 0%,
            #020711 100%
        );

    border-top: 1px solid #168cff;

    box-shadow:
        0 -5px 25px rgba(0, 132, 255, 0.15);

    padding: 24px 35px 28px;
}



/* =========================
   HEARTBEAT LOGIN
   ========================= */

/* Authentication panel for NYC and OSLO. */
.login-panel {
    max-width: 420px;

    margin: 0 auto 18px;
    padding: 12px;

    display: flex;
    gap: 7px;
    align-items: center;

    background: rgba(0, 0, 0, 0.25);

    border: 1px solid #17324d;
    border-radius: 5px;

    font-family: "Courier New", monospace;
}

/* Authentication heading. */
.login-title {
    color: #587795;

    font-size: 8px;
    letter-spacing: 1px;

    white-space: nowrap;
}

/* Email and password fields. */
#loginEmail,
#loginPassword {
    min-width: 0;
    width: 110px;

    padding: 6px;

    background: #050a10;
    color: #b8c7d9;

    border: 1px solid #284c6d;
    border-radius: 3px;

    font-family: "Courier New", monospace;
    font-size: 9px;

    outline: none;
}

#loginEmail:focus,
#loginPassword:focus {
    border-color: #168cff;
}

/* CONNECT button. */
#loginButton {
    padding: 6px 10px;

    background: rgba(22, 140, 255, 0.08);
    color: #70a8d8;

    border: 1px solid #168cff;
    border-radius: 3px;

    font-family: "Courier New", monospace;
    font-size: 9px;

    cursor: pointer;
}

/* Login success/error messages. */
#loginMessage {
    color: #65ffb0;

    font-size: 8px;
}



/* =========================
   TOP CONSOLE ROW
   ========================= */

/* Holds the title, connection display and send button. */
.console-top {
    display: flex;

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

    gap: 6px;

    max-width: 1400px;
    margin: auto;
}


/* =========================
   HEARTBEAT BRAND
   ========================= */

.brand {
    min-width: 220px;
}


/* Main HeartBeat title. */
.brand h1 {
    margin: 0;

    font-family: "Oxanium", sans-serif;
    font-size: 38px;
    font-weight: 600;

    letter-spacing: 3px;

    color: #087cff;

    text-shadow:
        0 0 4px #087cff,
        0 0 10px #0066ff,
        0 0 20px #004cff,
        0 0 35px rgba(0, 76, 255, 0.85);
}


/* PRIVATE CHANNEL subtitle. */
.brand p {
    margin: 5px 0 0;

    color: #7694b2;

    font-size: 11px;
    letter-spacing: 3px;
}


/* =========================
   MINI HEARTBEAT LOG
   ========================= */

/* Small history underneath the HeartBeat title. */
.mini-heartbeat-log {
    margin-top: 14px;

    width: 185px;

    padding-left: 8px;

    border-left:
        2px solid rgba(22, 140, 255, 0.45);

    font-family: "Courier New", monospace;

    line-height: 1.6;
}


/* "Recent HeartBeats" heading. */
.mini-log-title {
    margin-bottom: 3px;

    color: #587795;

    font-size: 8px;
    letter-spacing: 2px;
}


/* The three most recent heartbeat events. */
#heartbeatLog {
    color: #70a8d8;

    font-size: 9px;
    letter-spacing: 0.5px;

    text-shadow:
        0 0 5px rgba(22, 140, 255, 0.35);
}


/* =========================
   NYC ↔ OSLO CONNECTION
   ========================= */

/* Holds Bianca, signal lines, heart and Henrik. */
.connection {
    flex: 1;

    display: flex;

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

    gap: 12px;

    font-size: 16px;
}


/* Prevent the names from wrapping onto two lines. */
.connection-name {
    white-space: nowrap;
}


/* =========================
   SIGNAL TRACK
   ========================= */

/* Base line on each side of the heart. */
.signal-track {
    position: relative;

    width: 85px;
    height: 3px;

    overflow: hidden;

    background: #17324d;

    border-radius: 20px;

    box-shadow:
        0 0 5px rgba(22, 140, 255, 0.25);
}


/* Moving pink signal pulse. */
.signal-track::after {
    content: "";

    position: absolute;

    top: 50%;
    left: -25px;

    width: 24px;
    height: 3px;

    opacity: 0;

    border-radius: 20px;

    transform: translateY(-50%);

    background: #ff426d;

    box-shadow:
        0 0 5px #ff426d,
        0 0 12px #ff426d,
        0 0 20px rgba(255, 66, 109, 0.9);
}


/* JavaScript adds this class during transmission. */
.signal-track.transmit::after {
    animation:
        transmitSignal 0.7s ease-out forwards;
}


/* Move the signal across its track. */
@keyframes transmitSignal {

    0% {
        left: -25px;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 1;
    }
}


/* =========================
   HEART
   ========================= */

/* Center connection heart. */
.heart {
    display: inline-block;

    color: #ff426d;

    font-size: 35px;

    transform-origin: center;

    text-shadow:
        0 0 12px rgba(255, 66, 109, 0.8);
}


/* JavaScript adds this class when the heart beats. */
.heart.beating {
    animation:
        heartBeat 0.8s ease-in-out;
}


/* Double-beat animation. */
@keyframes heartBeat {

    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.45);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.28);
    }

    58% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================
   SEND HEARTBEAT BUTTON
   ========================= */

/* Circular transmission button. */
#heartbeatButton {
    width: 92px;
    height: 92px;

    padding: 0;

    background:
        rgba(255, 66, 109, 0.05);

    color: #ff426d;

    border: 4px solid #ff426d;
    border-radius: 50%;

    font-family: "Courier New", monospace;

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

    line-height: 1.25;

    cursor: pointer;

    display: flex;

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

    text-align: center;

    transition: 0.2s;

    box-shadow:
        0 0 10px rgba(255, 66, 109, 0.20),
        inset 0 0 10px rgba(255, 66, 109, 0.06);
}


/* Button appearance when the mouse is over it. */
#heartbeatButton:hover {
    background: #ff426d;

    color: white;

    box-shadow:
        0 0 10px rgba(255, 66, 109, 0.20),
        inset 0 0 10px rgba(255, 66, 109, 0.06);
}


/* Slight press effect when clicked. */
#heartbeatButton:active {
    transform: scale(0.96);
}


/* Appearance while a heartbeat is being transmitted. */
#heartbeatButton:disabled {
    cursor: default;

    opacity: 0.8;
}


/* =========================
   HEARTBEAT RESPONSE
   ========================= */


/* Displays transmitted/received messages. */

#heartbeatMessage {
    max-width: 1400px;

    min-height: 18px;

    margin: 10px auto 8px;

    color: #65ffb0;

    font-size: 12px;

    text-align: center;

    letter-spacing: 1px;
}


/* =========================
   LAST TRANSMISSION
   ========================= */

/* Displays the time of the last transmission. */
.last-heartbeat {
    margin: 6px auto 14px;

    text-align: center;

    font-size: 12px;
}



/* =========================
   SHORT MESSAGES
   ========================= */

/* Small NYC ↔ OSLO message console. */
.message-console {
    max-width: 520px;

    margin: 14px auto 18px;
    padding: 10px 12px;

    background: rgba(0, 0, 0, 0.22);

    border: 1px solid #17324d;
    border-radius: 5px;

    font-family: "Courier New", monospace;
}

/* Message console heading. */
.message-title {
    margin-bottom: 7px;

    color: #587795;

    font-size: 8px;
    letter-spacing: 2px;

    text-align: center;
}

/* Recent short messages. */
#messageLog {
    min-height: 20px;

    margin-bottom: 8px;

    color: #70a8d8;

    font-size: 9px;
    line-height: 1.5;
}

/* Input and SEND button row. */
.message-input-row {
    display: flex;
    gap: 7px;
}

/* Short-message input. */
#messageInput {
    flex: 1;

    padding: 7px 9px;

    background: #050a10;
    color: #b8c7d9;

    border: 1px solid #284c6d;
    border-radius: 3px;

    font-family: "Courier New", monospace;
    font-size: 10px;

    outline: none;
}

/* Highlight input when selected. */
#messageInput:focus {
    border-color: #168cff;
}

/* Message SEND button. */
#messageButton {
    padding: 7px 14px;

    background: rgba(22, 140, 255, 0.08);
    color: #70a8d8;

    border: 1px solid #168cff;
    border-radius: 3px;

    font-family: "Courier New", monospace;
    font-size: 9px;

    cursor: pointer;
}

#messageButton:hover {
    background: rgba(22, 140, 255, 0.18);
}



/* =========================
   LOWER STATUS ROW
   ========================= */

/* NYC, LILO.sys and OSLO panels. */
.console-bottom {
    max-width: 1400px;

    margin: 15px auto 0;

    padding-top: 10px;

    border-top: 1px solid #17324d;

    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.2fr;

    gap: 20px;
}


/* =========================
   NODE STATUS BOXES
   ========================= */

/* Shared styling for NYC and OSLO. */
.status-box {
    padding: 12px 16px;

    background:
        rgba(0, 0, 0, 0.25);

    border: 3px solid #893c7c;

    border-radius: 6px;
}


/* NODE NYC / NODE OSLO heading. */
.status-title {
    color: #7898b8;

    font-size: 20px;

    letter-spacing: 2px;

    margin-bottom: 7px;
}


/* Bianca / Henrik name. */
.username {
    color: #dbeeff;

    font-size: 14px;
}


/* Online-style status text.
   Also used by LILO.sys. */
.online {
    color: #65ffb0;

    margin-left: 8px;

    font-size: 11px;
}


/* =========================
   NODE PRESENCE
   ========================= */

/* Automatic CONNECTED / LAST SEEN display. */
.presence {
    margin-top: 8px;

    display: flex;
    flex-direction: column;
    gap: 2px;

    font-family: "Courier New", monospace;
    font-size: 9px;

    letter-spacing: 1px;
    line-height: 1.4;
}

/* CONNECTED / OFFLINE indicator. */
#nycPresence,
#osloPresence {
    color: #65ffb0;

    font-weight: bold;
}

/* Last-seen timestamp. */
#nycLastSeen,
#osloLastSeen {
    color: #587795;

    font-size: 8px;
}



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

/* Bianca and Henrik status dropdowns. */
#biancaStatus,
#henrikStatus {
    margin-left: 8px;

    padding: 5px 8px;

    background: #030711;

    color: #65ffb0;

    border: 1px solid #168cff;

    border-radius: 4px;

    font-family: "Courier New", monospace;

    font-size: 11px;

    outline: none;

    cursor: pointer;
}


/* =========================
   LILO.SYS
   ========================= */

/* Chief Security Officer panel. */
.lilo-box {
    padding: 12px 16px;

    background:
        rgba(130, 119, 119, 0.25);

    border: 2px solid #168cff;

    box-shadow:
        0 0 8px rgba(22, 140, 255, 0.8),
        inset 0 0 8px rgba(22, 140, 255, 0.15);

    color: #b8c7d9;

    font-size: 12px;

    line-height: 1.5;
}


/* LILO.sys name. */
.lilo-name {
    color: #56b7ff;

    font-weight: bold;
}


/* ROOT access label. */
.root {
    color: #ffcf5c;
}


/* =========================
   MOBILE / SMALL WINDOWS
   ========================= */

@media (max-width: 800px) {

    /* Reduce console padding on narrow screens. */
    .heartbeat-console {
        padding: 22px 16px;
    }


    /* Stack the top console elements vertically. */
    .console-top {
        flex-direction: column;

        text-align: center;

        gap: 18px;
    }


    /* Remove desktop minimum width. */
    .brand {
        min-width: 0;
    }


    /* Keep the NYC ↔ OSLO connection on one row. */
    .connection {
        width: 100%;

        flex-wrap: nowrap;

        gap: 6px;

        font-size: 11px;
    }


    /* Shorter signal tracks fit smaller screens. */
    .signal-track {
        width: 35px;
    }


    /* Slightly smaller heart. */
    .heart {
        font-size: 30px;
    }


    /* Stack NYC, LILO.sys and OSLO vertically. */
    .console-bottom {
        grid-template-columns: 1fr;
    }


    /* Keep the HeartBeat button circular on mobile. */
    #heartbeatButton {
        width: 92px;
        height: 92px;
    }


    /* Give the dropdowns a little vertical room. */
    #biancaStatus,
    #henrikStatus {
        margin-top: 8px;
    }
}