/* Fonte oficial do pacote new-interface_pokeidle. */
@scope (.chat-shell) {
:scope, :scope * { box-sizing: border-box; }
:scope {
    position: relative;

    width: 439px;
    height: 345px;

    color: #dbe5ec;
}

.chat-topbar {
    position: relative;

    width: 439px;
    height: 44px;

    background:
        url("assets/new-interface/chat/header-open.png")
        no-repeat left top;

    background-size: auto;
}

.chat-topbar h1 {
    position: absolute;
    left: 18px;
    top: 12px;

    margin: 0;

    color: #f1f4f5;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
}

.chat-online-indicator {
    position: absolute;
    right: 47px;
    top: 14px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #5fe171;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.45),
        0 0 6px rgba(95, 225, 113, 0.9);
}

.chat-minimize {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;

    width: 18px;
    height: 18px;

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

    padding: 0;

    border: 1px solid transparent;
    border-radius: 2px;

    background: rgba(13, 18, 25, 0.34);
    color: #f2d186;

    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    opacity: 0.88;

    cursor: pointer;

    transition:
        border-color 120ms ease,
        background 120ms ease,
        opacity 120ms ease,
        filter 120ms ease;
}



.chat-panel {
    position: absolute;
    left: 0;
    top: 50px;

    width: 439px;
    height: 295px;

    background:
        url("assets/new-interface/chat/chat-bg.png")
        no-repeat left top;

    background-size: auto;
}

.chat-tabs {
    position: absolute;
    left: 19px;
    top: 14px;

    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-tab {
    font-family: "Barlow", Arial, sans-serif;
    position: relative;

    padding: 0;
    margin: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.chat-tab .tab-image {
    display: block;
    width: auto;
    height: auto;

    user-select: none;
    pointer-events: none;
}

.chat-tab .tab-active {
    display: none;
}

.chat-tab.is-active .tab-active {
    display: block;
}

.chat-tab.is-active .tab-inactive {
    display: none;
}

.chat-tab:hover,
.chat-tab:focus-visible,
.chat-send:hover {
    filter: brightness(1.14);
}

.chat-minimize:hover,
.chat-minimize:focus-visible,
.chat-restore:hover,
.chat-restore:focus-visible {
    border-color: #b08d45;
    background: rgba(176, 141, 69, 0.08);
    opacity: 1;
    outline: none;
    filter: brightness(1.08);
}

.chat-tab:focus-visible,
.chat-send:focus-visible {
    outline: 1px solid rgba(242, 209, 134, 0.8);
    outline-offset: 1px;
}

.chat-tab:active,
.chat-minimize:active,
.chat-restore:active,
.chat-send:active {
    transform: translateY(1px);
}

.chat-messages {
    position: absolute;
    left: 18px;
    right: 16px;
    top: 60px;
    z-index: 2;

    width: auto;
    height: 192px;
    max-height: 192px;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 4px 6px 4px 0;

    color: #c8d3da;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 13px;
    line-height: 21px;

    scrollbar-width: thin;
    scrollbar-color: #75602d transparent;

    contain: paint;
    clip-path: inset(0);
    overscroll-behavior: contain;
}

.chat-messages::-webkit-scrollbar {
    width: 7px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #91773a 0%,
            #5c481f 100%
        );
}

.chat-message {
    display: flex;
    align-items: center;
    gap: 4px;

    min-width: 0;
    margin-bottom: 3px;
}

.chat-message-status {
    display: none;
}

.chat-message-badge {
    width: auto;
    height: 26px;
    flex: 0 0 auto;

    display: block;
    object-fit: contain;

    max-width: none;
    max-height: none;

    user-select: none;
    pointer-events: none;
}

.chat-message-copy {
    min-width: 0;
    flex: 1;
}

.chat-message-time {
    float: right;

    margin-left: 8px;

    color: #45545f;

    font-size: 11px;
}

.chat-message-name {
    color: #5fd8d0;

    font-weight: 700;
}

.chat-message-name::after {
    content: ":";
}

.chat-message-meta {
    color: #72808a;

    font-size: 11px;
}

.chat-message-text {
    color: #bac7cf;

    overflow-wrap: anywhere;
}

.chat-message.is-system .chat-message-copy {
    color: #d9b862;
    font-style: italic;
}

.chat-message.channel-guild .chat-message-text {
    color: #88c09a;
}

.chat-message.channel-party .chat-message-text {
    color: #9ebbe0;
}

.chat-message.channel-trade .chat-message-text {
    color: #dbba76;
}

.chat-composer {
    position: absolute;
    left: 18px;
    right: 16px;
    bottom: 14px;

    height: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-input-frame {
    position: relative;

    width: 314px;
    height: 26px;

    background:
        url("assets/new-interface/chat/message-input-bg.png")
        no-repeat left top;

    background-size: auto;
}

.chat-input {
    font-family: "Barlow", Arial, sans-serif;
    position: absolute;
    inset: 1px 10px;

    width: calc(100% - 20px);
    height: calc(100% - 2px);

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #e4edf3;

    font-size: 13px;
    line-height: 24px;
}

.chat-input::placeholder {
    color: #7d8f9b;
}

.chat-input-frame:focus-within {
    filter: brightness(1.06);
}

.chat-send {
    width: 59px;
    height: 30px;
    flex: 0 0 59px;

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

    padding: 0 0 1px;
    margin: 0;

    border: 0;
    outline: 0;

    background:
        url("assets/new-interface/chat/button-send.png")
        no-repeat left top;

    background-size: auto;

    color: #f3e5b5;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.35px;

    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.78);

    cursor: pointer;
}

.chat-restore {
    display: none;
}

:scope.is-minimized {
    width: 133px;
    height: 44px;
}

:scope.is-minimized .chat-topbar,
:scope.is-minimized .chat-panel {
    display: none;
}

:scope.is-minimized {
    background:
        url("assets/new-interface/chat/header-minimized.png")
        no-repeat left top;

    background-size: auto;
}

:scope.is-minimized .chat-restore {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;

    width: 18px;
    height: 18px;

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

    padding: 0;

    border: 1px solid transparent;
    border-radius: 2px;

    background: rgba(13, 18, 25, 0.34);
    color: #f2d186;

    font-family: "Barlow", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    opacity: 0.88;

    cursor: pointer;

    transition:
        border-color 120ms ease,
        background 120ms ease,
        opacity 120ms ease,
        filter 120ms ease;
}

@media (max-width: 463px) {
    .demo-stage {
        justify-items: start;
        overflow-x: auto;
    }

    :scope {
        margin-inline: 12px;
    }
}

:scope.is-minimized .chat-topbar h1,:scope.is-minimized .chat-online-indicator{display:none;}

:scope.is-minimized .chat-restore:active {
    transform: translateY(1px);
}


/* Hover effects */
.chat-message:hover{
    background:linear-gradient(90deg,rgba(176,141,69,.10),rgba(176,141,69,0));
    border-radius:3px;
}

.chat-send{
    transition:filter .15s ease,transform .1s ease;
}
.chat-send:hover{
    filter:brightness(1.12) drop-shadow(0 0 4px rgba(226,183,74,.35));
}
.chat-send:active{
    transform:translateY(1px);
}

.chat-tab{
    transition:filter .12s ease, transform .1s ease;
}
.chat-tab:hover{
    transform:translateY(-1px);
}

.chat-input-frame{
    transition:filter .12s ease, box-shadow .12s ease;
}
.chat-input-frame:focus-within{
    box-shadow:0 0 6px rgba(226,183,74,.18);
}

.chat-minimize:hover,
.chat-restore:hover{
    box-shadow:0 0 6px rgba(226,183,74,.28);
}


/* Cores dos cargos no nickname */
.chat-message.role-admin .chat-message-name {
    color: #ff6670;
}

.chat-message.role-streamer .chat-message-name {
    color: #c98cff;
}

.chat-message.role-tutor .chat-message-name {
    color: #70d98a;
}

.chat-message.role-vip .chat-message-name {
    color: #f2cf63;
}


/* ALINHAMENTO FINAL DAS BADGES */

.chat-message {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 1px;

    min-height: 26px;
    margin-bottom: 3px;
}

.chat-message:not(:has(.chat-message-badge)) {
    grid-template-columns: minmax(0, 1fr);
}

.chat-message-badge {
    align-self: center;

    width: auto;
    height: 26px;

    display: block;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: center;

    transform: translateY(1px);

    user-select: none;
    pointer-events: none;
}

.chat-message-copy {
    min-width: 0;

    display: block;

    padding: 0;
    margin: 0;

    line-height: 21px;
}

.chat-message-name {
    margin: 0;
}

.chat-message-meta {
    margin: 0;
}

.chat-message-text {
    margin: 0;
}


/* ÁREA DE 192 PX E SCROLLBAR CONTIDA */

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    margin-top: 2px;
    margin-bottom: 3px;
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #91773a 0%,
            #5c481f 100%
        );
}

.chat-message {
    max-width: 100%;
    overflow: hidden;
}

.chat-message-copy {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.chat-message-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =========================================================
   ÁREA FINAL DE MENSAGENS — 192 PX
   ========================================================= */

.chat-messages {
    position: absolute;
    left: 18px;
    right: 16px;
    top: 47px;
    z-index: 2;

    width: auto;
    height: 192px;
    max-height: 192px;

    display: block;

    padding: 0 6px 0 4px;
    margin: 0;

    overflow-x: hidden;
    overflow-y: auto;

    color: #c8d3da;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 13px;
    line-height: 21px;

    scrollbar-width: thin;
    scrollbar-color: #75602d transparent;

    overscroll-behavior: contain;
    scroll-behavior: smooth;

    /* Recorte real no limite da área escura. */
    clip-path: inset(0);
    contain: layout paint;
}

.chat-message-list {
    width: 100%;
    min-height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 7px 0;
    margin: 0;
}

/* Quando o conteúdo passa de 192 px, a lista cresce para cima/baixo
   normalmente e o scroll assume o controle sem centralização negativa. */
.chat-message-list:has(.chat-message:nth-child(8)) {
    justify-content: flex-start;
}

.chat-message {
    width: 100%;
    max-width: 100%;
    min-height: 26px;
    flex: 0 0 auto;

    overflow: hidden;
}

/* Mantém badge, nome, nível, texto e horário dentro da mesma largura. */
.chat-message-copy {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.chat-message-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Scrollbar alinhada exatamente aos 192 px. */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    margin-top: 5px;
    margin-bottom: 5px;

    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    min-height: 28px;

    border: 0;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #9a7c35 0%,
            #5c481f 100%
        );

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

.chat-messages::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #b18d3c 0%,
            #715725 100%
        );
}


/* =========================================================
   AJUSTES FINAIS
   ========================================================= */

/* As mensagens dos canais secundários começam no rodapé. */
.chat-message-list.is-bottom-aligned {
    justify-content: flex-end;
}

/* Quando a lista ultrapassar a área, o scroll continua natural. */
.chat-message-list.is-bottom-aligned:has(.chat-message:nth-child(8)) {
    justify-content: flex-start;
}

/* Estado minimizado com título visível. */
.chat-minimized-title {
    display: none;
}

:scope.is-minimized .chat-minimized-title {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 10;

    display: block;

    color: #f1f4f5;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.15px;

    transform: translateY(-50%);

    pointer-events: none;
}

/* Botão + no mesmo padrão da Team Bar, centralizado corretamente. */
:scope.is-minimized .chat-restore {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 20;

    width: 20px;
    height: 24px;

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

    padding: 0 0 1px;

    border: 0;
    border-left: 1px solid rgba(176, 141, 69, 0.35);
    border-radius: 0;

    background: transparent;
    color: #f2d186;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    opacity: 0.95;
    transform: translateY(-50%);

    cursor: pointer;
}

:scope.is-minimized .chat-restore:hover,
:scope.is-minimized .chat-restore:focus-visible {
    border-color: rgba(176, 141, 69, 0.5);
    background: rgba(242, 209, 134, 0.07);

    outline: none;
    box-shadow: none;
    filter: none;
}

:scope.is-minimized .chat-restore:active {
    transform: translateY(calc(-50% + 1px));
}

/* Destaque ADMIN. */
.chat-message.role-admin {
    position: relative;

    border-left: 2px solid rgba(255, 82, 92, 0.9);
    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 61, 74, 0.15) 0%,
            rgba(255, 61, 74, 0.045) 58%,
            transparent 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 0 7px rgba(255, 61, 74, 0.10);

    padding-left: 4px;
}

/* Destaque TUTOR. */
.chat-message.role-tutor {
    position: relative;

    border-left: 2px solid rgba(73, 210, 117, 0.9);
    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            rgba(63, 205, 110, 0.13) 0%,
            rgba(63, 205, 110, 0.04) 58%,
            transparent 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        0 0 7px rgba(63, 205, 110, 0.09);

    padding-left: 4px;
}

.chat-message.role-admin:hover {
    background:
        linear-gradient(
            90deg,
            rgba(255, 61, 74, 0.22) 0%,
            rgba(255, 61, 74, 0.07) 62%,
            transparent 100%
        );
}

.chat-message.role-tutor:hover {
    background:
        linear-gradient(
            90deg,
            rgba(63, 205, 110, 0.20) 0%,
            rgba(63, 205, 110, 0.065) 62%,
            transparent 100%
        );
}


/* =========================================================
   REFINOS FINAIS V2
   ========================================================= */

/* Botão + quadrado, sem aparência achatada. */
:scope.is-minimized .chat-restore {
    top: 50%;
    right: 10px;

    width: 20px;
    height: 20px;

    padding: 0 0 2px;

    border: 1px solid rgba(176, 141, 69, 0.45);
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(27, 37, 47, 0.96) 0%,
            rgba(13, 18, 25, 0.98) 100%
        );

    color: #f2d186;

    font-family: "Barlow", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.3);

    transform: translateY(-50%);
}

:scope.is-minimized .chat-restore:hover,
:scope.is-minimized .chat-restore:focus-visible {
    border-color: #b08d45;

    background:
        linear-gradient(
            180deg,
            rgba(42, 49, 53, 0.98) 0%,
            rgba(21, 27, 31, 0.98) 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 6px rgba(226, 183, 74, 0.24);

    outline: none;
}

:scope.is-minimized .chat-restore:active {
    transform: translateY(calc(-50% + 1px));
}

/* O efeito fica ligeiramente maior que a linha da mensagem. */
.chat-message.role-admin,
.chat-message.role-tutor {
    margin: 1px 0 2px;
    padding: 2px 6px 2px 5px;

    min-height: 30px;
}

.chat-message.role-admin {
    border-left-width: 3px;
}

.chat-message.role-tutor {
    border-left-width: 3px;
}


/* Badge 1px mais baixa para alinhar ao nome */
.chat-message-badge{
    transform: translateY(2px) !important;
}


/* =========================================================
   TAG SEMPRE JUNTO DO NOME
   ========================================================= */

.chat-message {
    display: block;
}

.chat-message-copy {
    display: block;
    min-width: 0;
    max-width: 100%;
    line-height: 21px;
}

.chat-message-identity {
    display: inline-flex;
    align-items: center;
    gap: 1px;

    white-space: nowrap;
    vertical-align: middle;
}

.chat-message-badge {
    flex: 0 0 auto;
    margin: 0;
    transform: translateY(2px) !important;
}

.chat-message-name {
    display: inline;
}

/* O texto pode quebrar, mas badge + nome permanecem juntos. */
.chat-message-meta,
.chat-message-text {
    display: inline;
}

/* =========================================================
   COOLDOWN DE ENVIO
   ========================================================= */

.chat-input:disabled {
    color: #71818c;
    cursor: not-allowed;
}

.chat-input-frame:has(.chat-input:disabled) {
    filter: brightness(0.82);
}

.chat-send:disabled {
    filter: grayscale(0.25) brightness(0.72);
    cursor: not-allowed;
    opacity: 0.82;
}

.chat-send:disabled:hover {
    filter: grayscale(0.25) brightness(0.72);
    transform: none;
}

/* UX polish */
.chat-system-notice{
  color:#d6b15a;
  font-size:12px;
  opacity:.9;
}
.chat-send:disabled{opacity:.85}


/* =========================================================
   HORÁRIO ALINHADO
   ========================================================= */

.chat-message-copy {
    min-width: 0;
    max-width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: start;
    column-gap: 8px;

    line-height: 21px;
}

.chat-message-content {
    min-width: 0;

    display: inline;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-message-time {
    float: none;

    width: 34px;
    margin: 0;
    padding-top: 1px;

    color: #45545f;

    font-size: 11px;
    line-height: 21px;
    text-align: right;

    white-space: nowrap;
}

/* =========================================================
   CHAT ARRASTÁVEL
   ========================================================= */

.chat-topbar {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

:scope.is-dragging .chat-topbar {
    cursor: grabbing;
}

.chat-minimize,
.chat-restore,
.chat-tab,
.chat-send,
.chat-input {
    cursor: pointer;
}

.chat-input {
    cursor: text;
}

}