/* =========================================================
   THEME: GOLDEN HUD
   Тактический золото-чёрный HUD со скошенными панелями.
========================================================= */

:root {

    --gold: #ffb000;
    --gold-light: #ffd45a;

    --black: #030303;

    --text: #eeeeee;
    --muted: #888888;

}

.chat-widget.theme-golden {

    padding: 74px 34px 20px;

    background: linear-gradient(
        135deg,
        rgba(20, 20, 20, var(--chat-opacity)),
        rgba(2, 2, 2, var(--chat-opacity))
    );

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

    box-shadow:
        0 0 4px var(--gold),
        0 0 14px rgba(255, 165, 0, 0.55),
        inset 0 0 20px rgba(255, 166, 0, 0.08);

    clip-path: polygon(
        3% 0, 18% 0, 20% 4%, 83% 4%, 85% 0, 97% 0,
        100% 7%, 100% 91%,
        96% 100%, 75% 100%, 73% 96%, 27% 96%, 25% 100%, 4% 100%,
        0 92%, 0 8%
    );
}

.theme-golden::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    background: repeating-linear-gradient(
        120deg,
        transparent 0,
        transparent 40px,
        rgba(255, 255, 255, 0.04) 41px,
        transparent 43px
    );

    z-index: 0;

}

.theme-golden .chat-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 68px;

    display: flex;

    align-items: center;

    z-index: 5;

}

.theme-golden .header-title {

    position: relative;

    height: 64px;

    min-width: 220px;

    padding: 0 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #080808, #171717);

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

    clip-path: polygon(14% 0, 100% 0, 88% 100%, 0 100%);

}

.theme-golden .header-title::before {

    content: "";

    position: absolute;

    top: 0;
    left: 30px;

    width: 60px;
    height: 3px;

    background: var(--gold);

    box-shadow: 0 0 10px var(--gold), 0 0 25px var(--gold);

}

.theme-golden .title-text {

    color: #f4f4f4;

    font-size: 26px;

    font-weight: 900;

    font-style: italic;

    letter-spacing: 4px;

    text-shadow: 1px 1px 0 #777, 2px 2px 0 #333, 0 0 5px rgba(255, 255, 255, 0.25);

    transform: skewX(-8deg);

}

.theme-golden .header-decoration {

    flex: 1;

    height: 100%;

    position: relative;

}

.theme-golden .header-decoration::after {

    content: "";

    position: absolute;

    left: 10px;
    right: 5%;

    top: 31px;

    height: 3px;

    background: linear-gradient(90deg, var(--gold), #ffdc73, var(--gold));

    box-shadow: 0 0 8px var(--gold), 0 0 20px rgba(255, 165, 0, 0.5);

}

@keyframes golden-flash {
    0% { opacity: 0.35; }
    50% { opacity: 1; }
    100% { opacity: 0.35; }
}

.theme-golden .header-decoration::before {

    content: "";

    position: absolute;

    top: 27px;
    left: 45%;

    width: 4px;
    height: 10px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 0 5px #fff, 0 0 15px var(--gold), 0 0 30px var(--gold);

    animation: golden-flash 2.5s infinite;

}

.theme-golden .messages {
    padding: 12px 10px 10px;
}

.theme-golden .message {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.theme-golden .message-icon {
    filter: drop-shadow(0 0 4px currentColor);
}

.theme-golden .username {
    text-shadow: 0 1px 3px #000;
}

.theme-golden .message-text {
    color: #e5e5e5;
    text-shadow: 0 1px 2px #000;
}

.theme-golden .message-time {
    color: var(--muted);
}

.theme-golden .message-source {
    color: var(--gold-light);
}