/* ==================================================
   STAFFLAND THEME SYSTEM
   ================================================== */

:root{
    color-scheme:dark;

    --sl-bg:#090c0e;
    --sl-bg-soft:#0b0f12;
    --sl-card:#0d1114;
    --sl-card-2:#101519;
    --sl-input:#0e1316;

    --sl-border:#282e33;
    --sl-border-soft:#242a2f;

    --sl-text:#eeeeee;
    --sl-text-soft:#b8bec2;
    --sl-muted:#777f85;
    --sl-muted-2:#555d63;

    --sl-gold:#d99a3d;
    --sl-gold-light:#efbc65;

    --sl-danger:#dc8880;

    --sl-shadow:rgba(0,0,0,.28);
}


html[data-theme="light"]{
    color-scheme:light;

    --sl-bg:#f3f5f7;
    --sl-bg-soft:#edf0f2;

    --sl-card:#ffffff;
    --sl-card-2:#f7f8f9;
    --sl-input:#ffffff;

    --sl-border:#d8dde1;
    --sl-border-soft:#e1e5e8;

    --sl-text:#171a1d;
    --sl-text-soft:#394047;

    --sl-muted:#68717a;
    --sl-muted-2:#899198;

    --sl-gold:#c98624;
    --sl-gold-light:#e9a844;

    --sl-danger:#c95d54;

    --sl-shadow:rgba(24,32,38,.10);
}


/* Плавный переход */

body,
.chat-card,
.chat-compose,
.chat-head,
.chat-input,
.chat-tool-button,
.chat-selected-file,
.chat-file,
.chat-emoji-picker,
.chat-reply,
.chat-replying,
.chat-action,
.chat-reaction,
.chat-reaction-picker{
    transition:
        background-color .20s ease,
        border-color .20s ease,
        color .20s ease,
        box-shadow .20s ease;
}


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

html[data-theme="light"] body{
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(201,134,36,.09),
            transparent 38%
        ),
        var(--sl-bg) !important;

    color:var(--sl-text) !important;
}


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

html[data-theme="light"] .chat-card{
    background:var(--sl-card);
    border-color:var(--sl-border);

    box-shadow:
        0 25px 70px
        var(--sl-shadow);
}

html[data-theme="light"] .chat-head{
    border-color:var(--sl-border-soft);
}

html[data-theme="light"] .chat-title,
html[data-theme="light"] .chat-name{
    color:var(--sl-text);
}

html[data-theme="light"] .chat-subtitle,
html[data-theme="light"] .chat-online,
html[data-theme="light"] .chat-empty{
    color:var(--sl-muted);
}

html[data-theme="light"] .chat-message:hover{
    background:rgba(20,28,34,.025);
}

html[data-theme="light"] .chat-text{
    color:var(--sl-text-soft);
}

html[data-theme="light"] .chat-time{
    color:var(--sl-muted-2);
}

html[data-theme="light"] .chat-compose{
    background:var(--sl-bg-soft);
    border-color:var(--sl-border-soft);
}


/* INPUT */

html[data-theme="light"] .chat-input,
html[data-theme="light"] .chat-tool-button{
    background:var(--sl-input);

    border-color:var(--sl-border);

    color:var(--sl-text);
}

html[data-theme="light"] .chat-input::placeholder{
    color:#959da3;
}

html[data-theme="light"] .chat-input:focus{
    border-color:
        rgba(201,134,36,.55);

    box-shadow:
        0 0 0 3px
        rgba(201,134,36,.08);
}


/* REPLY */

html[data-theme="light"] .chat-reply{
    background:#f3f5f6;

    color:var(--sl-muted);
}

html[data-theme="light"] .chat-replying{
    background:
        rgba(201,134,36,.06);
}


/* FILES */

html[data-theme="light"] .chat-selected-file,
html[data-theme="light"] .chat-file{
    background:#f7f8f9;

    border-color:var(--sl-border);
}

html[data-theme="light"] .chat-selected-preview{
    background:#eef1f3;
}

html[data-theme="light"] .chat-file{
    color:var(--sl-text-soft) !important;
}

html[data-theme="light"] .chat-file:hover{
    background:#f0f3f5;
}


/* EMOJI */

html[data-theme="light"] .chat-emoji-picker{
    background:#ffffff;

    border-color:var(--sl-border);

    box-shadow:
        0 18px 50px
        rgba(25,33,38,.15);
}

html[data-theme="light"] .chat-emoji:hover{
    background:#eef1f3;
}


/* MESSAGE ACTIONS */

html[data-theme="light"] .chat-action{
    background:#f0f2f4;

    color:#70787f;
}


/* REACTIONS */

html[data-theme="light"] .chat-reaction{
    background:#f5f7f8;

    border-color:var(--sl-border);

    color:#606970;
}

html[data-theme="light"] .chat-reaction:hover{
    background:#eef1f3;
}

html[data-theme="light"] .chat-reaction.active{
    background:
        rgba(201,134,36,.11);

    border-color:
        rgba(201,134,36,.55);

    color:#b9761e;
}

html[data-theme="light"] .chat-reaction-picker{
    background:#ffffff;

    border-color:var(--sl-border);
}

html[data-theme="light"] .chat-reaction-option:hover{
    background:#eef1f3;
}


/* scrollbar */

html[data-theme="light"] .chat-messages{
    scrollbar-color:
        #adb4b9
        #eef1f3;
}


/* ==================================================
   THEME BUTTON
   ================================================== */

#stafflandThemeToggle{
    width:36px;
    height:36px;

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

    padding:0;

    border:1px solid rgba(218,157,61,.28);
    border-radius:9px;

    background:rgba(218,157,61,.06);

    color:#e2a84b;

    cursor:pointer;

    font-size:17px;
    line-height:1;

    transition:.18s ease;
}

#stafflandThemeToggle:hover{
    border-color:
        rgba(218,157,61,.55);

    background:
        rgba(218,157,61,.12);

    transform:translateY(-1px);
}

html[data-theme="light"] #stafflandThemeToggle{
    background:#ffffff;

    border-color:#d6dce0;

    color:#a76818;

    box-shadow:
        0 2px 8px
        rgba(24,32,38,.06);
}