/* ===========================================================================
   Comunidade Simulados Premium — discussao em popup (estilo ExamTopics, +moderno)
   =========================================================================== */
.pe-disc-wrap { margin: 14px 0 0; }
.pe-disc-btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    font-weight: 700; font-size: 14px; color: #5624d0;
    background: #f3f0ff; border: 1px solid #ddd6fe; border-radius: 999px;
    padding: 9px 18px; cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.pe-disc-btn:hover { background: #ede9fe; border-color: #c4b5fd; }
.pe-disc-btn:active { transform: scale(.98); }
.pe-disc-btn svg { flex-shrink: 0; }
.pe-disc-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
    padding: 0 7px; border-radius: 999px; background: #5624d0; color: #fff; font-size: 12px; font-weight: 800;
}

/* ---------- Overlay + card ---------- */
.pe-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .pe-modal { align-items: center; padding: 24px; } }
.pe-modal[hidden] { display: none; }
.pe-modal__backdrop { position: absolute; inset: 0; background: rgba(17,12,40,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: peFade .18s ease; }
.pe-modal__card {
    position: relative; width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 24px 80px rgba(20,12,50,.4);
    font-family: Inter, system-ui, -apple-system, sans-serif; color: #1c1d1f; overflow: hidden;
    animation: peSlide .22s cubic-bezier(.2,.8,.25,1);
}
@media (min-width: 640px) { .pe-modal__card { border-radius: 20px; max-height: 88vh; } }
@keyframes peFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes peSlide { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Header ---------- */
.pe-modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid #eef0f3; }
.pe-modal__head .ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#7c4dff,#5624d0); color: #fff; }
.pe-modal__titles { flex: 1; min-width: 0; }
.pe-modal__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5624d0; }
.pe-modal__title { font-size: 1.02rem; font-weight: 800; margin: 2px 0 0; line-height: 1.35; }
.pe-modal__close { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f3f4f6; color: #4b5563; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pe-modal__close:hover { background: #e5e7eb; }

/* ---------- Body (scroll) ---------- */
.pe-modal__body { padding: 18px 24px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) { .pe-modal__head { padding: 16px; } .pe-modal__body { padding: 16px; } }

/* ---------- Distribuicao da comunidade ---------- */
.pe-dist { background: #faf9ff; border: 1px solid #ece8fd; border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.pe-dist__hd { font-size: 12.5px; font-weight: 800; color: #4c1d95; margin: 0 0 12px; display: flex; align-items: center; gap: 7px; }
.pe-dist__row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.pe-dist__row:last-child { margin-bottom: 0; }
.pe-dist__l { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; background: #ede9fe; color: #5624d0; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.pe-dist__row.mine .pe-dist__l { background: #5624d0; color: #fff; }
.pe-dist__bar { flex: 1; height: 9px; min-width: 50px; border-radius: 999px; background: #e9e6f6; overflow: hidden; }
.pe-dist__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg,#8b5cf6,#5624d0); transition: width .5s ease; }
.pe-dist__pct { width: 46px; text-align: right; font-size: 12.5px; font-weight: 800; }
.pe-dist__tot { margin: 12px 0 0; font-size: 11.5px; color: #6a6f73; }

/* ---------- Compose ---------- */
.pe-compose { border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.pe-compose__lbl { font-size: 12.5px; font-weight: 700; color: #374151; margin: 0 0 9px; }
.pe-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pe-chip { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid #e5e7eb; background: #fff; color: #374151; font-weight: 800; font-size: 14px; cursor: pointer; transition: all .12s; }
.pe-chip:hover { border-color: #c4b5fd; }
.pe-chip.on { background: #5624d0; border-color: #5624d0; color: #fff; box-shadow: 0 4px 12px rgba(86,36,208,.3); }
.pe-compose textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 14px; resize: vertical; color: #1c1d1f; box-sizing: border-box; min-height: 70px; }
.pe-compose textarea:focus { outline: none; border-color: #5624d0; box-shadow: 0 0 0 3px rgba(86,36,208,.12); }
.pe-compose__ft { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.pe-compose__counter { font-size: 12px; color: #9ca3af; }
.pe-send { border: 0; background: linear-gradient(135deg,#7c4dff,#5624d0); color: #fff; font-weight: 700; font-size: 14px; padding: 11px 24px; border-radius: 9px; cursor: pointer; font-family: inherit; }
.pe-send:hover { filter: brightness(1.06); }
.pe-send:disabled { opacity: .5; cursor: not-allowed; }
.pe-login-note { background: #f8fafc; border: 1px dashed #d1d5db; border-radius: 12px; padding: 16px 18px; font-size: 14px; color: #4b5563; text-align: center; margin-bottom: 20px; }
.pe-login-note a { color: #5624d0; font-weight: 800; text-decoration: none; }
.pe-login-note a:hover { text-decoration: underline; }

/* ---------- Tabs ---------- */
.pe-tabs { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #eef0f3; margin-bottom: 4px; }
.pe-tab { border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #6a6f73; padding: 9px 4px; margin-right: 14px; cursor: pointer; border-bottom: 2.5px solid transparent; }
.pe-tab.on { color: #5624d0; border-bottom-color: #5624d0; }
.pe-tab-count { margin-left: auto; font-size: 12.5px; color: #9ca3af; font-weight: 600; }

/* ---------- Comentarios ---------- */
.pe-list { margin-top: 6px; }
.pe-cmt { padding: 16px 0; border-bottom: 1px solid #f3f4f6; }
.pe-cmt.reply { margin-left: 38px; padding: 12px 0; border-bottom: 0; border-top: 1px dashed #f0f2f5; }
.pe-cmt__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pe-cmt__av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,#a78bfa,#5624d0); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pe-cmt__who { display: flex; flex-direction: column; line-height: 1.25; }
.pe-cmt__name { font-weight: 800; font-size: 13.5px; }
.pe-cmt__time { font-size: 11.5px; color: #9ca3af; }
.pe-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.pe-badge--top { background: #fef3c7; color: #92400e; }
.pe-badge--new { background: #dbeafe; color: #1e40af; }
.pe-badge--mine { background: #ede9fe; color: #5b21b6; }
.pe-badge--ans { background: #dcfce7; color: #166534; }
.pe-cmt__body { font-size: 14.5px; line-height: 1.65; color: #2b2d31; white-space: pre-wrap; word-break: break-word; }
.pe-cmt__actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pe-act { background: #f4f2fb; border: 1px solid #ddd5f3; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #4a3f6b; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; line-height: 1; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pe-act:hover { background: #ede9fe; border-color: #c4b5fd; color: #5624d0; }
.pe-act.on { background: #5624d0; border-color: #5624d0; color: #fff; }
.pe-act.on svg { fill: rgba(255,255,255,.3); }
.pe-act svg { width: 15px; height: 15px; }
.pe-act .lc { font-variant-numeric: tabular-nums; }
.pe-empty { font-size: 14px; color: #9ca3af; text-align: center; padding: 28px 0; }
.pe-loading { font-size: 14px; color: #9ca3af; text-align: center; padding: 28px 0; }
.pe-replybox { margin-top: 12px; }
.pe-replybox textarea { width: 100%; border: 1px solid #e5e7eb; border-radius: 9px; padding: 10px 12px; font-family: inherit; font-size: 13.5px; resize: vertical; box-sizing: border-box; }
.pe-replybox textarea:focus { outline: none; border-color: #5624d0; }
.pe-replybox .pe-send { margin-top: 8px; padding: 8px 18px; font-size: 13px; }

body.pe-modal-open { overflow: hidden; }