/* =========================================================
   CHIBI NETWORK — PRIVATE MESSAGES
   LIGHT PINK ALICE / OLD WEB
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    min-height: 100%;
}


body {
    margin: 0;

    padding:
        34px 16px 60px;

    color:
        #62545c;

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

    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(255, 255, 255, 0.82),
            transparent 25%
        ),
        radial-gradient(
            circle at 84% 72%,
            rgba(182, 196, 211, 0.14),
            transparent 25%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(132, 88, 106, 0.024) 0,
            rgba(132, 88, 106, 0.024) 1px,
            transparent 1px,
            transparent 5px
        ),
        #ead5dd;
}


body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(139, 102, 118, 0.06),
            transparent 20%,
            transparent 80%,
            rgba(139, 102, 118, 0.06)
        );
}


body::after {
    content: "";

    position: fixed;

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

    height: 12px;

    z-index: 20;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            #b98599 0,
            #b98599 12px,
            #f8f1f3 12px,
            #f8f1f3 24px
        );

    border-bottom:
        1px solid #9e7083;
}


button,
input,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
}


.hidden {
    display: none !important;
}



/* =========================================================
   MAIN APP
   ========================================================= */

#dm-app {
    width:
        min(
            940px,
            100%
        );

    margin:
        0 auto;

    overflow: hidden;

    border:
        2px solid #a67889;

    background:
        #fbf7f6;

    box-shadow:
        8px 8px 0
        rgba(
            115,
            82,
            96,
            0.18
        );
}


#dm-app::before {
    content:
        "\2661  PRIVATE MESSAGES // CHIBI NETWORK";

    display: block;

    padding:
        8px 11px;

    border-bottom:
        1px solid #956c7d;

    background:
        #b78699;

    color:
        #fffafb;

    font-size:
        10px;

    font-weight: bold;

    letter-spacing:
        1.5px;
}


#dm-app::after {
    content:
        "curiouser and curiouser... \2661";

    display: block;

    padding:
        7px 10px;

    border-top:
        1px solid #cfb3be;

    background:
        #f1e4e9;

    color:
        #a88894;

    text-align: right;

    font-size:
        8px;

    letter-spacing:
        1px;
}



/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3 {
    color:
        #8e6275;
}


h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    letter-spacing:
        4px;

    text-transform:
        uppercase;
}


h2,
h3 {
    font-family:
        "Courier New",
        monospace;

    letter-spacing:
        2px;
}



/* =========================================================
   CURRENT USER
   ========================================================= */

#dm-current-name {
    margin: 0;

    color:
        #8c6073;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        18px;
}


#dm-current-username {
    margin:
        3px 0 0;

    color:
        #a98291;

    font-size:
        9px;

    letter-spacing:
        1px;
}


#dm-current-avatar-image,
#dm-recipient-avatar-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


#dm-current-avatar-placeholder,
#dm-recipient-avatar-placeholder {
    color:
        #c38ba1;

    font-size:
        18px;
}



/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

#your-room-link,
a[href="public-blogs.html"],
a[href="my-friends.html"] {
    color:
        #987283;

    text-decoration:
        none;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        0.7px;
}


#your-room-link:hover,
a[href="public-blogs.html"]:hover,
a[href="my-friends.html"]:hover {
    color:
        #b05f80;

    text-decoration:
        underline;
}



/* =========================================================
   TABS
   ========================================================= */

#dm-inbox-tab,
#dm-sent-tab,
#dm-new-tab {
    position: relative;

    min-width:
        118px;

    margin:
        0 5px 6px 0;

    padding:
        8px 12px;

    border:
        1px solid #c3a1ae;

    background:
        #f4e8ec;

    color:
        #946c7d;

    box-shadow:
        2px 2px 0
        rgba(
            116,
            86,
            99,
            0.11
        );

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


#dm-inbox-tab::before {
    content:
        "\2661 ";
}


#dm-sent-tab::before {
    content:
        "\2660 ";
}


#dm-new-tab::before {
    content:
        "+ ";
}


#dm-inbox-tab:hover,
#dm-sent-tab:hover,
#dm-new-tab:hover {
    border-color:
        #a36f84;

    background:
        #f9dde7;

    color:
        #92566f;
}


#dm-inbox-tab.active,
#dm-sent-tab.active,
#dm-new-tab.active {
    border-color:
        #9b697c;

    background:
        #b47e94;

    color:
        #ffffff;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.2
        );
}


#dm-new-tab.active {
    background:
        #a9748a;
}



/* =========================================================
   MESSAGE PANEL
   ========================================================= */

.dm-messages-panel {
    margin:
        18px;

    border:
        1px solid #c1a6b0;

    background:
        #f6ecef;

    box-shadow:
        inset 0 0 0 3px
        #fffafb;
}


#dm-list-title {
    position: relative;

    margin: 0;

    padding:
        11px 14px;

    border-bottom:
        1px solid #b994a2;

    background:
        #ead6de;

    color:
        #8e6174;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        18px;

    font-weight:
        normal;

    letter-spacing:
        3px;
}


#dm-list-title::after {
    content:
        "\2661 MAILBOX";

    position: absolute;

    right:
        13px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #ad788d;

    font-family:
        "Courier New",
        monospace;

    font-size:
        8px;

    letter-spacing:
        1px;
}



/* =========================================================
   MESSAGE LIST
   ========================================================= */

#dm-message-list {
    display:
        grid;

    gap:
        10px;

    padding:
        12px;
}



/* =========================================================
   MESSAGE CARDS
   ========================================================= */

.dm-message-card,
.private-message-card {
    position: relative;

    padding:
        14px 15px;

    border:
        1px solid #cfbcc2;

    background:
        #fffdf9;

    color:
        #625960;

    box-shadow:
        3px 3px 0
        rgba(
            109,
            86,
            96,
            0.09
        );
}


.dm-message-card::before,
.private-message-card::before {
    content:
        "\2661";

    position: absolute;

    right:
        9px;

    bottom:
        7px;

    color:
        #d5a7b8;

    font-size:
        10px;
}


.dm-message-card:nth-child(even),
.private-message-card:nth-child(even) {
    background:
        #fff9fb;
}


.dm-message-card.unread,
.private-message-card.unread {
    border:
        1px solid #b97991;

    background:
        #fff2f6;

    box-shadow:
        inset 4px 0 0 #d99db4,
        3px 3px 0
        rgba(
            109,
            86,
            96,
            0.09
        );
}


.dm-message-card.unread::after,
.private-message-card.unread::after {
    content:
        "NEW \2661";

    position: absolute;

    top:
        6px;

    right:
        8px;

    padding:
        2px 5px;

    border:
        1px solid #d19bae;

    background:
        #f7dce5;

    color:
        #995e76;

    font-size:
        7px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}



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

.dm-message-header,
.private-message-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    gap:
        8px;

    padding-bottom:
        8px;

    margin-bottom:
        9px;

    border-bottom:
        1px dotted #cfb9c1;
}


.dm-message-person,
.private-message-person {
    color:
        #96687b;

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        0.8px;

    text-decoration:
        none;
}


a.dm-message-person:hover,
a.private-message-person:hover {
    color:
        #ae5677;

    text-decoration:
        underline;
}


.dm-message-date,
.private-message-date {
    color:
        #a59299;

    font-size:
        8px;
}



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

.dm-message-body,
.private-message-body {
    margin: 0;

    padding:
        3px 0;

    color:
        #625a60;

    font-size:
        11px;

    line-height:
        1.7;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}



/* =========================================================
   MESSAGE ACTIONS
   ========================================================= */

.dm-message-actions,
.private-message-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        12px;

    padding-top:
        8px;

    border-top:
        1px dotted #dac9cf;
}


.dm-small-button,
.dm-message-actions button,
.private-message-actions button {
    padding:
        5px 8px;

    border:
        1px solid #c19aa9;

    background:
        #f2e2e8;

    color:
        #8f6275;

    box-shadow:
        1px 1px 0
        rgba(
            99,
            77,
            87,
            0.1
        );

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        0.5px;
}


.dm-small-button:hover,
.dm-message-actions button:hover,
.private-message-actions button:hover {
    border-color:
        #a76a82;

    background:
        #f7dce6;

    color:
        #8d526a;
}



/* =========================================================
   EMPTY MESSAGE
   ========================================================= */

.dm-empty {
    margin: 0;

    padding:
        36px 16px;

    color:
        #a28d95;

    text-align:
        center;

    font-size:
        9px;

    line-height:
        1.8;

    letter-spacing:
        0.7px;
}


.dm-empty::before {
    content:
        "\2661";

    display:
        block;

    margin-bottom:
        7px;

    color:
        #c9859f;

    font-size:
        16px;
}



/* =========================================================
   COMPOSE PANEL
   ========================================================= */

#dm-compose-panel {
    margin:
        18px;

    padding:
        17px;

    border:
        1px solid #c19daa;

    background:
        #f5e9ed;

    box-shadow:
        inset 0 0 0 3px
        rgba(
            255,
            255,
            255,
            0.7
        );
}


#dm-compose-panel::before {
    content:
        "\2661  WRITE A PRIVATE MESSAGE";

    display:
        block;

    margin:
        -17px -17px 16px;

    padding:
        9px 11px;

    border-bottom:
        1px solid #b78d9d;

    background:
        #ead3dc;

    color:
        #8d6072;

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        1.4px;
}


#dm-compose-panel label {
    display:
        block;

    margin:
        12px 0 5px;

    color:
        #987080;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}



/* =========================================================
   RECIPIENT
   ========================================================= */

#dm-recipient {
    width:
        100%;

    padding:
        8px 9px;

    border:
        1px solid #c4a8b2;

    border-radius:
        0;

    outline:
        none;

    background:
        #fffdf9;

    color:
        #66555d;

    caret-color:
        #a95f7a;

    font-size:
        10px;
}


#dm-recipient:focus {
    border-color:
        #ad7188;

    box-shadow:
        0 0 0 2px
        rgba(
            184,
            116,
            143,
            0.12
        );
}


#dm-recipient::placeholder {
    color:
        #b09fa5;
}



/* =========================================================
   RECIPIENT PREVIEW
   ========================================================= */

#dm-recipient-preview {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        7px;

    padding:
        8px;

    border:
        1px dotted #c2a4af;

    background:
        #eddde3;
}


#dm-recipient-preview::before {
    content:
        "\2660 TO";

    color:
        #957080;

    font-size:
        8px;

    font-weight:
        bold;
}


#dm-recipient-name {
    color:
        #8d6173;

    font-size:
        10px;

    font-weight:
        bold;
}


#dm-recipient-username {
    color:
        #aa758a;

    font-size:
        8px;
}



/* =========================================================
   MESSAGE TEXTAREA
   ========================================================= */

#dm-message-body {
    width:
        100%;

    min-height:
        170px;

    resize:
        vertical;

    padding:
        13px;

    border:
        1px solid #c5adb6;

    border-radius:
        0;

    outline:
        none;

    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 25px,
            rgba(149, 103, 121, 0.07) 26px
        ),
        #fffefa;

    color:
        #62565d;

    caret-color:
        #a85e78;

    font-size:
        11px;

    line-height:
        26px;
}


#dm-message-body:focus {
    border-color:
        #ac6d85;

    box-shadow:
        0 0 0 2px
        rgba(
            178,
            111,
            138,
            0.1
        );
}


#dm-message-body::placeholder {
    color:
        #aa9a9f;
}



/* =========================================================
   CHARACTER COUNT
   ========================================================= */

#dm-character-count {
    display:
        inline-block;

    margin-top:
        6px;

    color:
        #a18c94;

    font-size:
        8px;

    letter-spacing:
        0.7px;
}



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

#dm-send-button {
    min-width:
        160px;

    margin-top:
        10px;

    padding:
        8px 12px;

    border:
        1px solid #9e6c80;

    border-radius:
        0;

    background:
        #b77e94;

    color:
        #fffafb;

    box-shadow:
        2px 2px 0
        rgba(
            90,
            65,
            76,
            0.18
        );

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


#dm-send-button:hover:not(:disabled) {
    border-color:
        #935d73;

    background:
        #a96882;
}


#dm-send-button:disabled {
    opacity:
        0.55;

    cursor:
        default;
}



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

#dm-compose-status {
    min-height:
        15px;

    margin:
        8px 0 0;

    color:
        #9d6078;

    font-size:
        8px;
}



/* =========================================================
   NEW MESSAGE SHORTCUT
   ========================================================= */

#dm-compose-shortcut {
    padding:
        6px 9px;

    border:
        1px solid #c09cab;

    background:
        #f2e5ea;

    color:
        #926879;

    font-size:
        8px;

    font-weight:
        bold;

    letter-spacing:
        0.7px;
}


#dm-compose-shortcut:hover {
    border-color:
        #a86c83;

    background:
        #f6dce5;

    color:
        #8d526a;
}



/* =========================================================
   LOGGED OUT
   ========================================================= */

#dm-login-required {
    width:
        min(
            620px,
            100%
        );

    margin:
        70px auto 0;

    padding:
        34px 25px;

    border:
        2px solid #ac7e90;

    background:
        #faf6f5;

    color:
        #8c7580;

    text-align:
        center;

    box-shadow:
        7px 7px 0
        rgba(
            101,
            73,
            85,
            0.14
        );
}


#dm-login-required::before {
    content:
        "\2661 PRIVATE MESSAGES \2661";

    display:
        block;

    margin:
        -34px -25px 25px;

    padding:
        8px;

    background:
        #b78699;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1.4px;
}


#dm-login-required h1,
#dm-login-required h2 {
    color:
        #8d6173;
}


#dm-login-required p {
    color:
        #96818a;

    font-size:
        9px;

    line-height:
        1.7;
}


#dm-login-required a {
    display:
        inline-block;

    margin-top:
        10px;

    padding:
        7px 10px;

    border:
        1px solid #b88d9d;

    background:
        #eee0e5;

    color:
        #8c6273;

    text-decoration:
        none;

    font-size:
        8px;

    font-weight:
        bold;
}


#dm-login-required a:hover {
    border-color:
        #a46a80;

    background:
        #f3dbe4;

    color:
        #875068;
}



/* =========================================================
   ALICE DETAILS
   ========================================================= */

.dm-messages-panel::after {
    content:
        "\2660  \2661  \2663  \2662";

    display:
        block;

    padding:
        7px;

    border-top:
        1px dotted #cdb5be;

    background:
        #eadce1;

    color:
        #a66f84;

    text-align:
        center;

    font-size:
        9px;

    letter-spacing:
        5px;
}



/* =========================================================
   TEXT SELECTION
   ========================================================= */

::selection {
    background:
        #d79eb4;

    color:
        #ffffff;
}



/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width:
        11px;
}


::-webkit-scrollbar-track {
    background:
        #eee1e6;
}


::-webkit-scrollbar-thumb {
    border:
        2px solid #eee1e6;

    background:
        #bd94a3;
}


::-webkit-scrollbar-thumb:hover {
    background:
        #a96f85;
}



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

@media (
    max-width: 700px
) {

    body {
        padding:
            23px 8px 40px;
    }


    #dm-app {
        width:
            100%;
    }


    #dm-inbox-tab,
    #dm-sent-tab,
    #dm-new-tab {
        min-width:
            0;

        width:
            calc(33.333% - 5px);

        padding:
            7px 4px;

        font-size:
            7px;
    }


    .dm-messages-panel,
    #dm-compose-panel {
        margin:
            9px;
    }


    #dm-compose-panel {
        padding:
            12px;
    }


    #dm-compose-panel::before {
        margin:
            -12px -12px 13px;
    }


    #dm-message-list {
        padding:
            7px;
    }


    .dm-message-card,
    .private-message-card {
        padding:
            12px;
    }


    .dm-message-header,
    .private-message-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    #dm-list-title {
        font-size:
            15px;
    }


    #dm-list-title::after {
        display:
            none;
    }


    #dm-message-body {
        min-height:
            150px;
    }


    #dm-send-button {
        width:
            100%;
    }

}