:root{

    --bg:#272933;
    --card:#f7f7f2;
    --text:#272933;
    --gold:#FFD700;

}

/* ===========================
   OBSCURE CHAT
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--bg);
    color:var(--card);
    font-family:Arial, Helvetica, sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    padding:40px;
}

.back-button{
    position:fixed;
    top:16px;
    left:16px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--card);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:22px;
    font-weight:900;
    line-height:1;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    z-index:999;
}

/* ===========================
   Main Container
=========================== */

.chat-container{
    width:100%;
    max-width:900px;
    background:var(--bg);
    border:2px solid var(--card);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ===========================
   Header
=========================== */

.chat-header{
    background:var(--card);
    color:var(--text);
    text-align:center;
    padding:25px;
}

.chat-header h1{
    font-size:2rem;
    margin-bottom:8px;
}

.chat-header p{
    font-size:.95rem;
}

/* ===========================
   Chat Area
=========================== */

#chat-box{
    height:500px;
    overflow-y:auto;
    padding:25px;
    background:var(--bg);
    display:flex;
    flex-direction:column;
    gap:18px;
}

#chat-box::-webkit-scrollbar{
    width:10px;
}

#chat-box::-webkit-scrollbar-thumb{
    background:var(--card);
    border-radius:20px;
}

/* ===========================
   Messages
=========================== */

.message{
    background:var(--card);
    color:var(--text);
    border-radius:12px;
    padding:12px;
    animation:pop .25s ease;
    word-wrap:break-word;
}

.message strong{
    color:var(--text);
    display:block;
    margin-bottom:5px;
    font-size:.95rem;
}

.message small{
    display:block;
    margin-top:8px;
    opacity:.65;
}

.mine{
    align-self:flex-end;
    background:#e9e9e2;
    color:var(--text);
}

.mine strong{
    color:var(--text);
}

/* ===========================
   Input Area
=========================== */

.chat-input-area{
    background:var(--card);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

input,
textarea{
    width:100%;
    border:none;
    outline:none;
    border-radius:8px;
    padding:10px;
    font-size:1rem;
    background:var(--card);
    color:var(--text);
}

textarea{
    resize:none;
    height:90px;
}

/* ===========================
   Button
=========================== */

button{
    background:var(--card);
    color:var(--text);
    border:none;
    border-radius:8px;
    cursor:pointer;
    padding:14px;
    font-size:1rem;
    font-weight:bold;
    transition:.2s;
}

button:hover{
    transform:translateY(-2px);
}

/* ===========================
   Animation
=========================== */

@keyframes pop{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ===========================
   Mobile
=========================== */

@media(max-width:700px){
    body{
        padding:15px;
    }

    #chat-box{
        height:420px;
    }
}

/* ===========================
   Owner Username
=========================== */

/* ===========================
   Owner Login
=========================== */

.owner-login{
    display:flex;
    gap:10px;
    margin-bottom:15px;
}

.owner-login input{
    flex:1;
}

.owner-login button{
    width:170px;
}

.owner-name{
    color:gold;
    font-weight:bold;
}

.owner-message{
    border:2px solid gold;
    box-shadow:0 0 12px rgba(255,215,0,.4);
}

.sketchez{

    margin:10px 0;

    padding:15px;

    background:#2f313d;

    border-radius:12px;

}

.sketchez h3{

    color:#f7f7f2;

    margin-bottom:12px;

}

#drawingCanvas{

    width:100%;
    max-width:600px;

    height:320px;

    display:block;

    background:#f7f7f2;

    border-radius:12px;

    border:2px solid #3a3d49;

    cursor:crosshair;

    touch-action:none;

}

.draw-controls{

    display:flex;

    gap:12px;

    margin-top:15px;

}

.chat-sketch{

    display:block;

    max-width:100%;

    max-height:350px;

    margin-top:10px;

    border-radius:10px;

    border:2px solid var(--gold);

    background:#f7f7f2;

}