/* iFeedeBook final perfil/comentarios/fotos
   No toca el diseño del header, buscador ni notificaciones.
*/

/* Perfil: la edición del perfil arranca cerrada y se abre desde Acciones */
body[data-page="profile"] #editProfileBox.ifb-profile-edit-collapsed {
  display: none !important;
}

/* Comentarios: SIEMPRE una línea real:
   input comentario | icono | comentar
*/
.comment-form,
.page-comment-form,
.retro-page-comment-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px 82px !important;
  gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 6px !important;
  clear: both !important;
  table-layout: auto !important;
  border-spacing: 0 !important;
}

.comment-form .retro-icon-picker,
.page-comment-form .retro-icon-picker,
.retro-page-comment-form .retro-icon-picker,
.comment-form .composer-tools,
.page-comment-form .composer-tools,
.retro-page-comment-form .composer-tools,
.comment-form .floating-icon-trigger,
.page-comment-form .floating-icon-trigger,
.retro-page-comment-form .floating-icon-trigger,
.comment-form .ifb-floating-icon-trigger,
.page-comment-form .ifb-floating-icon-trigger,
.retro-page-comment-form .ifb-floating-icon-trigger {
  display: none !important;
}

.comment-form input[name="content"],
.page-comment-form input[name="content"],
.retro-page-comment-form input[name="content"] {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  box-sizing: border-box !important;
}

.comment-form .ifb-final-comment-icon-button,
.page-comment-form .ifb-final-comment-icon-button,
.retro-page-comment-form .ifb-final-comment-icon-button,
.comment-form .ifb-comment-inline-icon-button,
.page-comment-form .ifb-comment-inline-icon-button,
.retro-page-comment-form .ifb-comment-inline-icon-button,
.comment-form .ifb-lite-icon-button,
.page-comment-form .ifb-lite-icon-button,
.retro-page-comment-form .ifb-lite-icon-button {
  grid-column: 2 !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  background: #5b74a8 !important;
  border: 1px solid #29447e !important;
  border-top-color: #8a9cc2 !important;
  color: #fff !important;
  font-size: 16px !important;
  line-height: 28px !important;
  font-weight: bold !important;
  box-sizing: border-box !important;
}

.comment-form button[type="submit"],
.page-comment-form button[type="submit"],
.retro-page-comment-form button[type="submit"] {
  grid-column: 3 !important;
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 30px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Picker de iconos de comentarios */
#ifbFinalCommentIconPicker {
  position: absolute;
  z-index: 99999;
  width: 245px;
  padding: 7px;
  background: #f7f7f7;
  border: 2px solid #1d2a5b;
  box-shadow: 3px 3px 0 rgba(0,0,0,.22);
  color: #1c2a47;
}

#ifbFinalCommentIconPicker.hidden {
  display: none !important;
}

.ifb-final-comment-picker-title {
  background: #d8dfea;
  border: 1px solid #b3bdd2;
  color: #3b5998;
  font-weight: bold;
  padding: 5px 7px;
  margin-bottom: 7px;
}

.ifb-final-comment-icon-choice {
  float: left;
  width: 29px !important;
  height: 29px !important;
  margin: 2px !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 27px !important;
  background: #fff !important;
  border: 1px solid #aebbd4 !important;
  color: #2d4373 !important;
  font-size: 15px !important;
  font-weight: bold !important;
}

/* Fotos del perfil */
#ifbProfilePhotosBox {
  clear: both;
}

.ifb-profile-photos-grid {
  overflow: hidden;
  margin: -4px;
}

.ifb-profile-photo-item {
  float: left;
  width: 31.333%;
  margin: 1%;
  border: 1px solid #b3bdd2;
  background: #f7f7f7;
  padding: 4px;
  min-height: 124px;
  box-sizing: border-box;
}

.ifb-profile-photo-item a {
  display: block;
  color: #3b5998;
  text-decoration: none;
}

.ifb-profile-photo-item img {
  display: block;
  width: 100%;
  height: 92px;
  object-fit: cover;
  border: 1px solid #999;
  background: #d8dfea;
}

.ifb-profile-photo-caption {
  display: block;
  padding-top: 4px;
  color: #777;
  font-size: 11px;
  line-height: 1.25;
  height: 31px;
  overflow: hidden;
}

.ifb-profile-photo-source {
  display: block;
  color: #3b5998;
  font-size: 11px;
  font-weight: bold;
  padding-top: 2px;
}

/* Orden del perfil: perfil, edición si se abre, compositor, fotos, muro */
body[data-page="profile"] main {
  display: flex;
  flex-direction: column;
}

body[data-page="profile"] main > .box:first-child { order: 1; }
body[data-page="profile"] main > #editProfileBox { order: 2; }
body[data-page="profile"] main > .post-box { order: 3; }
body[data-page="profile"] main > #ifbProfilePhotosBox { order: 4; }
body[data-page="profile"] main > #posts { order: 5; }

/* Mobile */
@media (max-width: 520px) {
  .comment-form,
  .page-comment-form,
  .retro-page-comment-form {
    grid-template-columns: minmax(0, 1fr) 32px 72px !important;
    gap: 4px !important;
  }

  .comment-form .ifb-final-comment-icon-button,
  .page-comment-form .ifb-final-comment-icon-button,
  .retro-page-comment-form .ifb-final-comment-icon-button,
  .comment-form .ifb-comment-inline-icon-button,
  .page-comment-form .ifb-comment-inline-icon-button,
  .retro-page-comment-form .ifb-comment-inline-icon-button,
  .comment-form .ifb-lite-icon-button,
  .page-comment-form .ifb-lite-icon-button,
  .retro-page-comment-form .ifb-lite-icon-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  .comment-form button[type="submit"],
  .page-comment-form button[type="submit"],
  .retro-page-comment-form button[type="submit"] {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    font-size: 11px !important;
  }

  #ifbFinalCommentIconPicker {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto !important;
  }

  .ifb-profile-photo-item {
    width: 48%;
    margin: 1%;
  }
}