/* === CHAT WIDGET === */
.chat-widget {
    position: fixed;
    left: clamp(10px, 3vw, 80px);
    top: 95px;
    width: clamp(220px, 16vw, 280px);
    height: 780px;
    max-height: calc(100vh - 120px);
    background: rgba(26,30,36,.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,77,77,.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    transition: height .4s ease, opacity .4s ease;
    animation: widgetFadeIn .18s ease-out forwards;
    z-index: 100;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
}

/* hidden должен перебивать animation, иначе forwards-состояние opacity:1
   не даст виджету скрыться */
.chat-widget.hidden {
    visibility: hidden;
    opacity: 0;
    animation: none;
}

.chat-widget.collapsed {
    height: 42px !important;
    background: rgba(26,30,36,.35);
    backdrop-filter: blur(4px);
    opacity: .75;
}

.chat-widget.collapsed .chat-messages,
.chat-widget.collapsed .chat-input-row {
    display: none !important;
}

.chat-header,
.top-header {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 48px;
    align-items: center;
    height: 40px;
    min-height: 40px;
    padding: 0 12px;
    margin: 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,77,77,.2);
    color: #ff4d4d;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.chat-header .chat-title,
.top-header .top-title {
    grid-column: 2;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header .chat-controls,
.top-header .top-controls {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 48px;
}

.chat-header button,
.top-header button {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,77,77,.3);
    color: #b0b8c5;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-widget.collapsed .chat-header {
    border-bottom: none;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 4px 12px;
    gap: 4px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-messages > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1 !important;
}

.chat-messages .msg-system {
    color: #808890;
    font-size: 11px;
    font-style: italic;
    padding: 2px 0;
    word-wrap: break-word;
}

/* --- Две колонки: время | содержимое сообщения --- */
.chat-messages .msg-user {
    color: #e0e0e0;
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
    line-height: 1.45;

    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 4px;
    align-items: baseline;
}

/* Колонка со временем */
.chat-messages .msg-user .msg-time {
    grid-column: 1;
    color: #666;
    font-size: 10px;
    white-space: nowrap;
}

/* Общий контейнер ника и текста */
.chat-messages .msg-user .msg-content {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Ник и медаль */
.chat-messages .msg-user .msg-head {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    vertical-align: baseline;
    margin-right: 4px;
}

/* Ник */
.chat-messages .msg-user .msg-nick,
.chat-messages .msg-user a.msg-nick {
    color: #ff4d4d;
    font-weight: bold;
    text-decoration: none;
}

.chat-messages .msg-user a.msg-nick:hover {
    color: #ff8080;
    text-decoration: underline;
}

/* Медаль внутри msg-head */
.chat-messages .msg-user .msg-medal-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: 4px;
}

.chat-messages .msg-user .msg-medal-slot img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

/* Текст должен оставаться строчным элементом */
.chat-messages .msg-user .msg-text {
    display: inline;
    color: #e0e0e0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-input-row {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 12px 12px;
    border-top: 1px solid rgba(255,77,77,.2);
    flex-shrink: 0;
}

.chat-input-row input {
    flex: 1;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,77,77,.3);
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    min-width: 0;
}

.chat-input-row button {
    background: #ff4d4d;
    color: #fff;
    border: none;
    padding: 0 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.chat-blocked {
    color: #666;
    font-size: 11px;
    text-align: center;
    padding: 6px;
    width: 100%;
}

/* === TOP WIDGET === */
.top-widget {
    position: fixed;
    right: clamp(10px, 3vw, 80px);
    top: 95px;
    width: clamp(220px, 16vw, 280px);
    height: 780px;
    max-height: calc(100vh - 120px);
    background: rgba(26,30,36,.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,77,77,.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    transition: height .4s ease, opacity .4s ease;
    animation: widgetFadeIn .18s ease-out forwards;
    z-index: 100;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
}

.top-widget.hidden {
    visibility: hidden;
    opacity: 0;
    animation: none;
}

.top-widget.collapsed {
    height: 42px !important;
    background: rgba(26,30,36,.35);
    backdrop-filter: blur(4px);
    opacity: .75;
}

.top-widget.collapsed .top-list {
    display: none !important;
}

.top-widget.collapsed .top-header {
    border-bottom: none;
}

.top-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}

.top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s;
    font-size: 12px;
    border-left: 3px solid transparent;
    background: rgba(0,0,0,.15);
    border-top: 1px solid rgba(255,255,255,.03);
    border-right: 1px solid rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.03);
}

.top-row.top-1 {
    background: rgba(255,215,0,.08);
    border-left-color: #ffd700;
    border-top-color: rgba(255,215,0,.25);
    border-right-color: rgba(255,215,0,.25);
    border-bottom-color: rgba(255,215,0,.25);
}

.top-row.top-2 {
    background: rgba(192,192,192,.08);
    border-left-color: #c0c0c0;
    border-top-color: rgba(192,192,192,.25);
    border-right-color: rgba(192,192,192,.25);
    border-bottom-color: rgba(192,192,192,.25);
}

.top-row.top-3 {
    background: rgba(205,127,50,.08);
    border-left-color: #cd7f32;
    border-top-color: rgba(205,127,50,.25);
    border-right-color: rgba(205,127,50,.25);
    border-bottom-color: rgba(205,127,50,.25);
}

.top-rank {
    font-weight: bold;
    font-size: 11px;
    min-width: 24px;
    text-align: right;
    flex-shrink: 0;
}

.top-rank.rank-1 { color: #ffd700; }
.top-rank.rank-2 { color: #c0c0c0; }
.top-rank.rank-3 { color: #cd7f32; }
.top-rank.rank-other { color: #ff4d4d; }

.top-medal-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-right: 4px;
}

.top-medal-slot img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.top-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,77,77,.4);
    object-fit: cover;
    flex-shrink: 0;
}

.top-avatar-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #555;
    font-size: 10px;
}

.top-name-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.top-name {
    color: #d0d5dd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-elo {
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    white-space: nowrap;
}

.top-empty {
    color: #808890;
    font-size: 12px;
    text-align: center;
    padding: 20px 0;
    font-style: italic;
}

/* === MEDAL TOOLTIP === */
.medal-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
}

.medal-tooltip.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.medal-tooltip-inner {
    background: rgba(15,18,21,.98);
    border: 1px solid rgba(255,77,77,.4);
    border-radius: 8px;
    padding: 12px 14px;
    min-width: 200px;
    max-width: 260px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
    text-align: center;
}

.medal-tooltip-inner img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 8px;
}

.medal-tooltip-title {
    color: #ff4d4d;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 6px;
}

.medal-tooltip-desc {
    color: #b0b8c5;
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.medal-tooltip-date {
    color: #666;
    font-size: 10px;
    font-style: italic;
}

.msg-medal-slot.clickable,
.top-medal-slot.clickable {
    cursor: pointer;
}

.msg-medal-slot.clickable img[data-medal="beta-tester"],
.top-medal-slot.clickable img[data-medal="beta-tester"] {
    filter: drop-shadow(0 0 4px rgba(100,180,255,.7));
}

.msg-medal-slot.clickable img[data-medal="demon-ebychiy"],
.top-medal-slot.clickable img[data-medal="demon-ebychiy"] {
    filter: drop-shadow(0 0 4px rgba(220,20,20,.8));
}

/* === АНИМАЦИЯ ПОЯВЛЕНИЯ ВИДЖЕТОВ === */
@keyframes widgetFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .chat-widget,
    .top-widget {
        display: none;
    }
}