/* ==================================================
   BASICS
================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: #f2efe7;
    color: #171717;

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

body.modal-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}


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

header {
    position: sticky;

    top: 0;

    z-index: 150;

    height: 75px;

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

    padding: 0 5%;

    border-bottom: 1px solid #171717;

    background: #f2efe7;
}

.logo {
    height: 50px;

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


.logo img {
    display: block;

    width: auto;
    height: 50px;

    object-fit: contain;
}

.menu-button,
.profile-button {
    padding: 0;

    border: none;

    background: transparent;

    color: #171717;

    cursor: pointer;
}

.menu-button {
    font-size: 22px;
}

.profile-button {
    width: 32px;
    height: 32px;

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


.profile-button svg {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==================================================
   HERO
================================================== */

.hero {
    max-width: 1100px;

    margin: 0 auto;

    padding: 90px 30px 70px;
}

.eyebrow {
    margin: 0;

    font-size: 12px;

    letter-spacing: 3px;
}

.hero h1 {
    margin: 20px 0 50px;

    font-size: clamp(40px, 7vw, 80px);

    line-height: 0.95;

    letter-spacing: -4px;
}


/* ==================================================
   SEARCH
================================================== */

.search-container {
    display: flex;

    width: 100%;

    border: 2px solid #171717;
}

.search-container input {
    flex: 1;

    min-width: 0;

    padding: 20px;

    border: none;

    outline: none;

    background: transparent;

    font-size: 16px;
}

.search-container button {
    padding: 0 30px;

    border: none;
    border-left: 2px solid #171717;

    background: #171717;
    color: #f2efe7;

    cursor: pointer;
}

.search-container button:hover {
    background: transparent;
    color: #171717;
}


/* ==================================================
   SIDEBAR
================================================== */

.sidebar {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    width: 300px;

    padding: 40px;

    background: #171717;
    color: #f2efe7;

    z-index: 200;

    transform: translateX(-100%);

    transition: transform 0.25s ease;
}


/* THIS IS WHAT MAKES IT APPEAR */

.sidebar.open {
    transform: translateX(0);
}


.sidebar h2 {
    margin: 0 0 50px;

    letter-spacing: 5px;
}

.sidebar nav {
    display: flex;

    flex-direction: column;

    gap: 25px;
}

.sidebar nav a {
    color: #f2efe7;

    text-decoration: none;

    font-size: 14px;
}

.sidebar nav a:hover {
    text-decoration: underline;
}


/* SIDEBAR CLOSE BUTTON */

.close-button {
    position: absolute;

    top: 20px;
    right: 25px;

    padding: 0;

    border: none;

    background: transparent;
    color: #f2efe7;

    font-size: 25px;

    cursor: pointer;
}


/* START PROJECT BUTTON */

.create-button {
    position: absolute;

    right: 40px;
    bottom: 40px;
    left: 40px;

    width: calc(100% - 80px);

    padding: 15px;

    border: 1px solid #f2efe7;

    background: transparent;
    color: #f2efe7;

    cursor: pointer;
}

.sidebar a.create-button {
    display: block;

    text-align: center;
    text-decoration: none;
}

.create-button:hover {
    background: #f2efe7;
    color: #171717;
}


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

@media (max-width: 800px) {

    .hero {
        padding-top: 60px;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .search-container button {
        padding: 0 15px;
    }

    .sidebar {
        width: min(300px, 85vw);
    }

}

/* ==================================================
   FLOATING MESSAGES
================================================== */

.floating-messages {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 180;
}


/* BUTTON */

.messages-floating-button {
    position: relative;

    width: 56px;
    height: 56px;

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

    margin-left: auto;

    padding: 0;

    border: 1px solid #171717;
    border-radius: 50%;

    background: #171717;
    color: #f2efe7;

    cursor: pointer;
}

.messages-floating-button:hover {
    background: #f2efe7;
    color: #171717;
}

.messages-floating-button svg {
    width: 24px;
    height: 24px;
}

.messages-unread-badge {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    border: 1px solid #171717;
    border-radius: 20px;

    background: #f2efe7;
    color: #171717;

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

    line-height: 18px;
}


/* PANEL */

.messages-panel {
    width: 360px;
    height: 500px;

    margin-bottom: 12px;

    border: 1px solid #171717;

    background: #f2efe7;

    box-shadow:
        6px 6px 0 #171717;

    overflow: hidden;
}

.messages-panel[hidden] {
    display: none;
}


/* HEADER */

.messages-header {
    min-height: 55px;

    display: grid;
    grid-template-columns:
        40px 1fr 40px;

    align-items: center;

    padding: 0 10px;

    border-bottom: 1px solid #171717;
}

.messages-header strong {
    overflow: hidden;

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

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

.messages-back,
.messages-close {
    padding: 5px;

    border: none;

    background: transparent;
    color: #171717;

    font-size: 20px;

    cursor: pointer;
}

.messages-close {
    grid-column: 3;

    justify-self: end;
}


/* BODY */

.messages-body {
    height: calc(100% - 55px);

    overflow-y: auto;
}

.messages-panel:has(
    .messages-composer:not([hidden])
) .messages-body {
    height: calc(100% - 120px);
}


/* CONVERSATION LIST */

.conversation-entry {
    width: 100%;

    display: grid;
    grid-template-columns:
        42px 1fr auto;

    gap: 12px;
    align-items: center;

    padding: 15px;

    border: none;
    border-bottom: 1px solid #171717;

    background: transparent;
    color: #171717;

    text-align: left;

    cursor: pointer;
}

.conversation-entry:hover {
    background: #e4dfd3;
}

.conversation-avatar {
    width: 42px;
    height: 42px;

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

    border: 1px solid #171717;
    border-radius: 50%;

    font-size: 12px;
    font-weight: bold;
}

.conversation-information {
    min-width: 0;
}

.conversation-top {
    display: flex;
    justify-content: space-between;

    gap: 10px;
}

.conversation-top strong {
    overflow: hidden;

    font-size: 12px;

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

.conversation-top span {
    flex-shrink: 0;

    font-size: 10px;
}

.conversation-information p {
    overflow: hidden;

    margin: 6px 0 0;

    font-size: 11px;

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

.conversation-unread {
    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    border-radius: 20px;

    background: #171717;
    color: #f2efe7;

    font-size: 10px;

    line-height: 20px;
    text-align: center;
}


/* MESSAGE BUBBLES */

.message-bubble {
    max-width: 78%;

    margin: 12px;

    padding: 10px 12px;

    border: 1px solid #171717;
}

.message-bubble.sent {
    margin-left: auto;

    background: #171717;
    color: #f2efe7;
}

.message-bubble.received {
    margin-right: auto;

    background: transparent;
}

.message-bubble p {
    margin: 0 0 7px;

    font-size: 12px;
    line-height: 1.45;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-bubble span {
    display: block;

    font-size: 9px;

    text-align: right;

    opacity: 0.7;
}


/* COMPOSER */

.messages-composer {
    height: 65px;

    display: grid;
    grid-template-columns:
        1fr auto;

    border-top: 1px solid #171717;
}

.messages-composer[hidden] {
    display: none;
}

.messages-composer textarea {
    width: 100%;

    resize: none;

    padding: 12px;

    border: none;
    outline: none;

    background: transparent;
    color: #171717;

    font-size: 12px;
}

.messages-composer button {
    padding: 0 15px;

    border: none;
    border-left: 1px solid #171717;

    background: #171717;
    color: #f2efe7;

    font-size: 11px;

    cursor: pointer;
}

.messages-composer button:hover {
    background: transparent;
    color: #171717;
}


/* EMPTY */

.messages-empty {
    padding: 35px 20px;

    font-size: 11px;
    text-align: center;
}

.messages-section-title {
    padding: 10px 14px;

    border-bottom: 1px solid #171717;

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

    letter-spacing: 0.08em;

    background: #e7e2d7;
}


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

@media (max-width: 800px) {

    .floating-messages {
        right: 15px;
        bottom: 15px;
    }

    .messages-panel {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 100%;

        margin: 0;

        border: none;

        box-shadow: none;
    }

}
/* ==================================================
   FLOATING NOTIFICATIONS
================================================== */

.floating-notifications {
    position: fixed;

    right: 91px;
    bottom: 25px;

    z-index: 181;
}


.notifications-floating-button {
    position: relative;

    width: 56px;
    height: 56px;

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

    border: 1px solid #171717;
    border-radius: 50%;

    background: #171717;
    color: #f2efe7;

    cursor: pointer;
}

.notifications-floating-button:hover {
    background: #f2efe7;
    color: #171717;
}


.notifications-floating-button svg {
    width: 24px;
    height: 24px;
}


.notifications-unread-badge {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    border: 2px solid #f2efe7;
    border-radius: 999px;

    background: #171717;
    color: #f2efe7;

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

    text-align: center;
}


.notifications-panel {
    position: absolute;

    right: 0;
    bottom: 70px;

    width: 360px;
    height: 500px;

    border: 1px solid #171717;

    background: #f2efe7;

    box-shadow: 6px 6px 0 #171717;

    overflow: hidden;
}


.notifications-panel[hidden] {
    display: none;
}


.notifications-header {
    min-height: 58px;

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

    gap: 12px;

    padding: 12px 14px;

    border-bottom: 1px solid #171717;
}


.notifications-header-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}


.notifications-mark-all,
.notifications-close {
    border: 0;

    background: transparent;
    color: #171717;

    font-family: "Courier New", monospace;

    cursor: pointer;
}


.notifications-mark-all {
    font-size: 10px;
}


.notifications-close {
    font-size: 24px;
    line-height: 1;
}


.notifications-body {
    height: calc(100% - 58px);

    overflow-y: auto;
}


.notification-entry {
    width: 100%;

    display: grid;
    grid-template-columns: 10px 1fr;

    gap: 10px;

    padding: 16px;

    border: 0;
    border-bottom: 1px solid #171717;

    background: transparent;
    color: #171717;

    font-family: "Courier New", monospace;

    text-align: left;

    cursor: pointer;
}


.notification-entry:hover {
    background: #e7e2d7;
}


.notification-indicator {
    width: 7px;
    height: 7px;

    margin-top: 5px;

    border-radius: 50%;

    background: transparent;
}


.notification-entry.unread
.notification-indicator {
    background: #171717;
}


.notification-entry.unread
.notification-information p {
    font-weight: bold;
}


.notification-information p {
    margin: 0 0 8px;

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


.notification-information span {
    font-size: 10px;

    opacity: 0.6;
}


.notifications-empty {
    padding: 30px 16px;

    font-size: 12px;

    text-align: center;
}


/* ==================================================
   NOTIFICATIONS — MOBILE
================================================== */

@media (max-width: 800px) {

    .floating-notifications {
        right: 91px;
        bottom: 20px;
    }


    .notifications-panel {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 100%;

        box-shadow: none;
    }

}
/* ==================================================
   PAGE LOADING
================================================== */

.rollout-page-loader {
    position: fixed;

    inset: 0;

    z-index: 9999;

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

    background: #f2efe7;
}

.rollout-page-loader img {
    display: block;

    width: auto;
    height: 70px;

    object-fit: contain;
}