/* ============================================================
   BASE
   ============================================================ */
.bot-title{color:#103e8a;margin-bottom:12px}
.bot-form label{display:block;margin-bottom:8px}
.bot-form input[type="text"],.bot-form select,.bot-form textarea{
    width:100%;
    padding:8px;
    border-radius:6px;
    border:1px solid #ddd;
    margin-bottom:8px
}
.bot-submit{
    background:linear-gradient(90deg,#ff7a18,#ffb347);
    border:none;
    color:#fff;
    padding:10px 16px;
    border-radius:8px;
    cursor:pointer
}
.bot-card{
    border:1px solid #e6eefc;
    padding:12px;
    margin-bottom:12px;
    border-radius:8px;
    background:#fff;
    box-shadow:0 1px 3px rgba(11,61,145,.04)
}
.bot-card-header{display:flex;gap:10px;align-items:center}
.bot-avatar{
    border-radius:50%;
    width:48px;
    height:48px;
    object-fit:cover;
}
.bot-author a{color:#0b3d91;font-weight:600;text-decoration:none}

/* ============================================================
   WRAPPER E ESTILOS BASE
   ============================================================ */
.bot-wrap {
    max-width: 1100px;
    margin: 20px auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
}

.bot-tabs { display: flex; gap: 8px; margin-bottom: 20px; }

.bot-tab {
    background: #eef4ff;
    border: 1px solid #cfe0ff;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    color: #0b3d91;
}

.bot-tab.active {
    background: linear-gradient(90deg,#0b3d91,#1450c6);
    color: #fff;
}

#bot-agreement-form label {
    display: block;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
}

#bot-agreement-form input[type="text"],
#bot-agreement-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 14px;
}
#bot-agreement-form select {
	width: 100%;
	border-radius: 6px;
    border: 1px solid #ddd;
    margin-bottom: 14px;
}

.bot-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.inputs-search-mural{
	margin-bottom: 7px;
}

.inputs-search-mural select, .inputs-search-mural input  {
	height: 40px;
	background-color: #f2f2f2 !important;
	color: #212529 !important;
}

.inputs-search-mural input::placeholder, .inputs-search-mural select::placeholder {
	color: #212529 !important;
	 font-weight: 600 !important;
}
.inputs-search-mural select {
    font-weight: 600;
    color: #212529;
}

.bot-quill { margin-top: 8px; margin-bottom: 16px; }

.bot-modal-inner {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 800px;
    margin: 40px auto;
    border: 1px solid #ddd;
}




/* ============================================================
   LIMITE DE LINHAS DO MURAL
   ============================================================ */
.bot-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
    line-height: 1.5em;
    white-space: normal !important;
    word-break: break-word !important;
}

/* link "ler mais" */
.bot-read-more {
    color: #0056d6;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   MODAL LER MAIS — QUEBRA DE LINHA CORRIGIDA
   ============================================================ */
.bot-text-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.bot-text-inner {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.bot-text-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: #0056d6;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.bot-text-content {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    line-height: 1.6;
    font-size: 16px;
}
/* TÍTULO DO ACORDO NO MURAL */
.bot-open-link {
    all: unset;              /* remove TODOS os estilos de botão */
    cursor: pointer;
    font-weight: 700;
    color: #0b3d91;
    display: inline;         /* evita aparência de bloco */
}

/* hover discreto, como link */
.bot-open-link:hover {
    text-decoration: underline;
}



/* ============================================================
   CHECKBOX EM 2 COLUNAS
   ============================================================ */
.checkbox-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

/* botoes de comentarios */
.bot-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* bloco do autor */
.bot-author {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* linha superior: nome + botões */
.bot-author-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* nome do usuário */
.bot-author-top > a {
    font-weight: 600;
    color: #0b3d91;
    text-decoration: none;
	flex-direction: column;
    align-items: flex-start;
}

/* botões à direita */
.bot-comment-actions {
    display: flex;
    gap: 10px;
	margin-top: 6px;
}

/* ===============================
   BOTÕES DO CARD DE COMENTÁRIO
   =============================== */
.bot-comment-actions a,
.bot-comment-actions button {
    display: flex;
    align-items: center;
	flex-wrap: wrap; /* 🔥 impede vazamento */
    justify-content: center;

    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
    font-weight: 600;

    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
}

/* ver acordo */
.bot-btn-view {
    background: #93E9BE;
    color: #000;
}

/* voltar */
.bot-btn-back {
    background: #e6eefc;
    color: #0b3d91;
}

.bot-agreement-text {
    white-space: pre-wrap;     /* 🔥 respeita quebras de linha */
    word-break: break-word;
    line-height: 1.6;
    font-size: 16px;
}


/* MOBILE */
@media (max-width: 600px) {
    .bot-comment-actions {
        justify-content: flex-start;
    }

    .bot-comment-actions a {
        flex: 1;          /* 🔥 ocupa largura igual */
        min-width: 120px;
        font-size: 12px;
    }
}
/* ===== RANKING – MOBILE (DESTACADO & ATRAENTE) ===== */
@media (max-width: 768px) {

  /* grid vira lista vertical com respiro */
  .bot-ranking-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .bot-ranking-column {
    width: 100%;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f6f9ff);
    box-shadow: 0 8px 20px rgba(11, 61, 145, 0.12);
    border: 1px solid #e1ebff;
  }

  /* título da coluna (ex: Mais Comentados) */
  .bot-ranking-column h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0b3d91;
    margin-bottom: 14px;
    text-align: center;
  }

  /* lista */
  .bot-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* card individual */
  .bot-rank-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e6eefc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: transform .15s ease, box-shadow .15s ease;
  }

  .bot-rank-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  /* posição no ranking (1º, 2º, 3º…) */
  .bot-rank-position {
    font-size: 20px;
    font-weight: 800;
    color: #ff8a00;
    min-width: 28px;
    text-align: center;
  }

  /* avatar maior */
 .bot-rank-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
	cursor: pointer;
    border: none;
}


  /* info do usuário */
  .bot-rank-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
  }

  .bot-rank-info a {
    font-size: 15px;
    font-weight: 600;
    color: #0b3d91;
    text-decoration: none;
  }

  .bot-rank-info small {
    font-size: 13px;
    color: #666;
  }

  /* métrica (comentários, likes, etc) */
  .bot-rank-metric {
    font-size: 14px;
    font-weight: 700;
    color: #103e8a;
    background: #eef4ff;
    padding: 6px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }

}

/* ============================================================
   RANKING — DESKTOP (CORRIGIDO)
   ============================================================ */
.bot-ranking-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    margin-top:24px;
}

.bot-ranking-column{
    position:relative;
}

.bot-ranking-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* CARD */
.bot-ranking-list .bot-rank-card{
    position:relative;               /* 🔥 VOLTA AO FLUXO */
    padding:20px 20px 20px 120px;    /* espaço real para avatar */
  
    box-shadow:0 10px 26px rgba(0,0,0,.08);
}

/* AVATAR */
.bot-rank-avatar{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    width:80px;
    height:80px;
    object-fit:cover;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
	cursor: pointer;
    border: none;
}

/* TEXTO */
.bot-rank-card h3,
.bot-rank-card h4{
    font-size:15px;
    font-weight:700;
    margin-bottom:4px;
    color:#0b3d91
}
.bot-rank-card p{
    font-size:13px;
    color:#555;
    margin:0
}

/* ============================================================
   RANKING — MOBILE
   ============================================================ */
@media (max-width:768px){

    .bot-ranking-grid{
        grid-template-columns:1fr;
    }

    .bot-ranking-list .bot-rank-card{
        padding:16px 16px 16px 96px;
    }

    .bot-rank-avatar{
        width:60px;
        height:60px;
        left:16px;
		cursor: pointer;
    	border: none;
    }
}
   /* ===== MURAL – FILTROS MOBILE ===== */
@media (max-width: 768px) {

  .bot-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .bot-tools input,
  .bot-tools select,
  .bot-tools button {
    width: 100%;
  }

}

 /* ===============================
   BOTÕES DO MURAL — MOBILE (CLEAN)
   =============================== */
@media (max-width: 768px) {

    .bot-actions {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
        padding: 6px 0;
    }

    .bot-actions button,
    .bot-actions a {
        background: transparent;
        border: none;
        padding: 6px;
        min-width: 36px;
        height: 36px;

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

        font-size: 14px;
        color: #ccc;
        cursor: pointer;
        border-radius: 50%;
    }

    .bot-actions button:hover,
    .bot-actions a:hover {
        background: rgba(255,255,255,0.08);
    }

    .bot-accept .bot-icon::before {
        content: "✔️";
        font-size: 17px;
    }

    .bot-comment .bot-icon::before {
        content: "💬";
        font-size: 17px;
    }

    .bot-share .bot-icon::before {
        content: "📤";
        font-size: 17px;
    }

    /* CONTADOR */
    .bot-count {
    font-size: 12px;
    color: #888;
}
}

/* ===============================
   BOTÕES DO MURAL — GLOBAL DESKTOP
   =============================== */

.bot-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bot-actions button,
.bot-actions a {
    background: transparent;
    border: none;
    padding: 6px;
    min-width: 36px;
    height: 36px;

    display: flex;
    flex-direction: column; /* 🔥 permite ícone em cima */
    align-items: center;
    justify-content: center;

    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-radius: 50%;
}


.bot-accept .bot-icon::before {
    content: "🤝";
    font-size: 17px;
}

.bot-comment .bot-icon::before {
    content: "💬";
    font-size: 17px;
}

.bot-share .bot-icon::before {
    content: "🔗";
    font-size: 17px;
}

/* contador */
.bot-count {
    font-size: 12px;
    margin-left: 4px;
    color: #888;
}


    /* ===== FORMULÁRIO / ABAS – MOBILE ===== */
@media (max-width: 768px) {

  .bot-tabs {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding-bottom: 6px;
  }

  .bot-tab {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* Conteúdo não vaza */
  .bot-tab-content,
  .bot-form,
  .bot-editor {
    width: 100%;
    overflow-x: hidden;
  }

}

.bot-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.bot-modal-content {
    background: #111;
    padding: 16px;
    width: 90%;
    max-width: 400px;
    border-radius: 12px;
    color: #fff;
}

.bot-modal textarea {
    width: 100%;
    min-height: 80px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #444;
    background: #1c1c1c;
    color: #fff;
}

.bot-modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.bot-modal-actions button {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

    /* ===== FORMULÁRIO / ABAS – MOBILE ===== */

.bot-agreement-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bot-agreement-content {
    background: #fff;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 14px;
    padding: 24px;
    position: relative;
}

.bot-agreement-content h2 {
    margin-top: 0;
}

.bot-close-modal {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
/* STATS DO RANKING — ALINHADO À ESQUERDA */
.bot-rank-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* 👈 esquerda real */
    justify-content: flex-start;

    margin-top: 8px;
    margin-left: 0;

    width: fit-content;        /* 👈 impede centralização */
}

/* ícone */
.bot-rank-icon {
    font-size: 16px;
    line-height: 1;
    color: #000;                   /* 🔥 PRETO, SEM 3D */
}

/* contador */
.bot-rank-count {
    font-size: 16px;
    font-weight: 600;
    color: #000;                   /* 🔥 PRETO */
    line-height: 1;
}

/*seta*/
.bot-ranking-next, .bot-ranking-prev {
    margin-top: 14px;
    background: #0b3d91;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

.bot-ranking-next:hover, .bot-ranking-prev:hover {
    background: #1450c6;
}

.bot-ranking-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bot-ranking-next, .bot-ranking-prev {
    align-self: center;
}

/* ===== TÍTULO DO ACORDO — MOBILE FIX ===== */
@media (max-width: 768px) {

  .bot-open-link {
    all: unset;                 /* remove TODOS estilos nativos */
    display: inline;
    font-weight: 700;
    color: #0b3d91;
    cursor: pointer;
  }

  .bot-open-link:active {
    opacity: 0.7;               /* feedback de toque */
  }
}

/* ===== MODAL LER MAIS — MOBILE FIX ===== */
@media (max-width: 768px) {

  .bot-text-inner {
    max-height: 85vh;
    padding-top: 60px; /* espaço pro botão */
  }

  .bot-text-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000000;
  }
}
/* ver acordo, voltar mobile */
@media (max-width: 768px) {

  /* container dos botões */
  .bot-comment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* esquerda */
    gap: 8px;
  }

  /* botões */
  .bot-comment-actions a,
  .bot-comment-actions button {
    flex: 0 0 auto !important;     /* NÃO cresce */
    min-width: auto !important;    /* remove largura forçada */
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 6px !important;

    background: none !important;   /* remove fundo estranho */
    color: #000 !important;        /* 🔥 PRETO FIXO */
  }

  /* remove qualquer efeito de botão grande */
  .bot-btn-view,
  .bot-btn-back {
    background: none !important;
    color: #000 !important;
  }
}

#bot-ranking-list{
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px){
    #bot-ranking-list{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px){
    #bot-ranking-list{
        grid-template-columns: 1fr;
    }
}

.activity-comments {
    margin-top: 20px;
    padding-left: 0;
}

/* Cada comentário */
.activity-comments .comment-item {
    list-style: none;
    position: relative;
    padding: 12px 0 12px 65px;
    border-bottom: 1px solid #eee;
}

/* Avatar */
.activity-comments .acomment-avatar {
    position: absolute;
    left: 0;
    top: 12px;
}

.activity-comments .acomment-avatar img {
    border-radius: 50%;
}

/* Meta (nome + tempo) */
.activity-comments .acomment-meta {
    font-size: 14px;
    margin-bottom: 6px;
}

.activity-comments .acomment-meta a {
    font-weight: 600;
    text-decoration: none;
}

/* Conteúdo */
.activity-comments .acomment-content {
    font-size: 15px;
    line-height: 1.6;
}

/* Remove reações (igual BP) */
.activity-comments .activity-state-reactions,
.activity-comments .comment-reactions {
    display: none !important;
}

#bot-accept-comment::placeholder {
  color: rgba(255,255,255,1);
}

.btn-edit {
    background-color: gray;
    border-radius: 25px;
    color: white;
}
.btn-delete {
    background-color: red;
    border-radius: 25px;
    color: white;
}

.bot-date {
    color: gray;
    font-size: 15px;
}

.swal2-container {
  z-index: 100000 !important;
}