/* =====================================================================
   AprovAKI — Aviso de questão · v1 · 01/08/2026
   ---------------------------------------------------------------------
   Botão-ícone injetado pelo aki_aviso.js no rodapé (.acoes-card) do card.
   Segue o mesmo peso visual do bookmark de salvar e das estrelas de
   dificuldade — sem chamar atenção demais, sem sumir.

   Ícone: Phosphor `ph-warning-circle` (mesma família já usada no site).
   Cores no repouso: cinza (herda do salvar/bookmark).
   Cores no hover / aberto: âmbar #F4C24A (bico do AKI · D1).
   ================================================================== */

.aki-aviso {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* v1.4 (2026-08-01): o botão de aviso mora dentro de .post-card-tools
   (mesma linha do salvar + dificuldade), mas SEMPRE como último item
   visual — depois do texto "Seja o primeiro a avaliar." / média.
   Como a ordem de injeção JS entre aki_aviso e aki_dificuldade é
   assíncrona (ambos via MutationObserver), fixamos com flex `order`.
   Também damos um respiro extra à esquerda para separar do widget
   de dificuldade sem parecer colado. */
.post-card-tools > .aki-aviso {
    order: 99;
    margin-left: 6px; /* soma-se ao gap:10px do container = ~16px de respiro */
}

/* Botão-ícone (proporcional ao .btn-salvar-questao) */
.aki-aviso__btn {
    all: unset;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    opacity: .60;
    transition: opacity .15s ease, color .15s ease, background-color .15s ease, transform .15s ease;
}
.aki-aviso__btn i {
    font-size: 20px;
    line-height: 1;
}
.aki-aviso__btn:hover,
.aki-aviso__btn:focus-visible {
    opacity: 1;
    color: #B87A00;                 /* âmbar escuro, contraste AA */
    background-color: rgba(244, 194, 74, .12);
    outline: none;
}
.aki-aviso__btn:focus-visible {
    box-shadow: 0 0 0 2px #F4C24A;
}
.aki-aviso.is-open .aki-aviso__btn {
    opacity: 1;
    color: #B87A00;
    background-color: rgba(244, 194, 74, .18);
}
.aki-aviso.is-sent .aki-aviso__btn {
    opacity: 1;
    color: #16a34a;                 /* verde confirmação */
    cursor: default;
}
.aki-aviso.is-sent .aki-aviso__btn:hover {
    background-color: transparent;
}

/* ===================== Popover ===================== */
.aki-aviso__pop {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    width: 280px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
    display: none;
    font-family: inherit;
    color: #0f172a;
}
.aki-aviso.is-open .aki-aviso__pop {
    display: block;
    animation: aki-aviso-in .14s ease-out;
}

@keyframes aki-aviso-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* setinha */
.aki-aviso__pop::after {
    content: '';
    position: absolute;
    right: 12px;
    bottom: -6px;
    width: 12px; height: 12px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    transform: rotate(45deg);
}

.aki-aviso__title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #0f172a;
    letter-spacing: .01em;
}

.aki-aviso__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}
.aki-aviso__opt {
    all: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.3;
    color: #1f2937;
    cursor: pointer;
    transition: background-color .12s ease;
    /* 2026-08-02: garante texto fluido sem espaçamento estranho.
       O item "Falta informação (texto/imagem)" estava aparecendo
       com espaços gigantes entre palavras porque algum ancestral
       define text-align:justify. Aqui forçamos alinhamento à
       esquerda, sem justificar, e habilitamos quebra normal. */
    text-align: left;
    text-align-last: left;
    word-spacing: normal;
    letter-spacing: normal;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.aki-aviso__opt > span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    text-align-last: left;
    white-space: normal;
    word-spacing: normal;
    letter-spacing: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}
.aki-aviso__opt:hover,
.aki-aviso__opt:focus-visible {
    background-color: #f1f5f9;
    outline: none;
}
.aki-aviso__opt[aria-checked="true"] {
    background-color: rgba(244, 194, 74, .18);
    color: #7a4b00;
    font-weight: 600;
}
.aki-aviso__opt i {
    font-size: 16px;
    color: #64748b;
    flex-shrink: 0;
}
.aki-aviso__opt[aria-checked="true"] i {
    color: #B87A00;
}

.aki-aviso__coment {
    width: 100%;
    box-sizing: border-box;
    resize: none;
    min-height: 54px;
    padding: 8px 10px;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.35;
    color: #0f172a;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    margin-bottom: 8px;
}
.aki-aviso__coment:focus {
    outline: none;
    border-color: #F4C24A;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(244, 194, 74, .25);
}

.aki-aviso__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.aki-aviso__cancelar,
.aki-aviso__enviar {
    all: unset;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.aki-aviso__cancelar {
    color: #475569;
}
.aki-aviso__cancelar:hover { color: #0f172a; }
.aki-aviso__enviar {
    background: #4B3CB8;
    color: #fff;
    box-shadow: 0 2px 6px rgba(75, 60, 184, .28);
    transition: background-color .12s ease, box-shadow .12s ease, transform .05s ease;
}
.aki-aviso__enviar:hover     { background: #3d31a0; }
.aki-aviso__enviar:active    { transform: translateY(1px); }
.aki-aviso__enviar[disabled] {
    background: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
}

.aki-aviso__msg {
    margin: 0 0 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.35;
    border-radius: 8px;
    background: #ecfdf5;
    color: #065f46;
    display: none;
}
.aki-aviso__msg.is-erro {
    background: #fef2f2;
    color: #991b1b;
}
.aki-aviso__msg.is-visivel { display: block; }

/* Mobile: popover ocupa quase a largura do card, ainda ancorado à direita */
@media (max-width: 420px) {
    .aki-aviso__pop { width: 260px; }
}