/* iFeedeBook - Comment input/button width V8
   Corrige:
   - Desktop/web: Comentar más ancho + input más angosto.
   - Mobile: input más angosto para que botón Comentar no sobresalga.
   - Web normal: Comentar sin redondeo.
   - iPhone standalone: conserva redondeo leve si aplica.
*/

/* ============================================================
   BASE: filas de comentario siempre flex y sin overflow.
   ============================================================ */

.comment-form,
.page-comment-form,
.retro-page-comment-form,
.chat-form,
.message-form,
.ifb-chat-form,
.ifb-message-form,
.comment-form .form-row,
.page-comment-form .form-row,
.retro-page-comment-form .form-row,
.chat-form .form-row,
.message-form .form-row,
.ifb-chat-form .form-row,
.ifb-message-form .form-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Botón de iconos fijo para que no coma espacio raro */
.comment-form .ifb-final-comment-icon-button,
.comment-form .ifb-comment-inline-icon-button,
.comment-form .ifb-lite-icon-button,
.page-comment-form .ifb-final-comment-icon-button,
.page-comment-form .ifb-comment-inline-icon-button,
.page-comment-form .ifb-lite-icon-button,
.retro-page-comment-form .ifb-final-comment-icon-button,
.retro-page-comment-form .ifb-comment-inline-icon-button,
.retro-page-comment-form .ifb-lite-icon-button {
  flex: 0 0 31px !important;
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  box-sizing: border-box !important;
}

/* ============================================================
   DESKTOP / WEB NORMAL
   Comentar más ancho y input más chico.
   ============================================================ */

.comment-form button[type="submit"],
.page-comment-form button[type="submit"],
.retro-page-comment-form button[type="submit"],
.chat-form button[type="submit"],
.message-form button[type="submit"],
.ifb-chat-form button[type="submit"],
.ifb-message-form button[type="submit"] {
  flex: 0 0 104px !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  line-height: 17px !important;
  padding: 3px 10px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}

/* En web normal NO redondear Comentar */
html:not(.ifb-iphone-app-standalone-v2):not(.ifb-iphone-app-standalone-v3):not(.ifb-iphone-app-standalone-v4):not(.ifb-iphone-app-standalone-v5):not(.ifb-iphone-app-standalone-v6)
.comment-form button[type="submit"],
html:not(.ifb-iphone-app-standalone-v2):not(.ifb-iphone-app-standalone-v3):not(.ifb-iphone-app-standalone-v4):not(.ifb-iphone-app-standalone-v5):not(.ifb-iphone-app-standalone-v6)
.page-comment-form button[type="submit"],
html:not(.ifb-iphone-app-standalone-v2):not(.ifb-iphone-app-standalone-v3):not(.ifb-iphone-app-standalone-v4):not(.ifb-iphone-app-standalone-v5):not(.ifb-iphone-app-standalone-v6)
.retro-page-comment-form button[type="submit"],
html:not(.ifb-iphone-app-standalone-v2):not(.ifb-iphone-app-standalone-v3):not(.ifb-iphone-app-standalone-v4):not(.ifb-iphone-app-standalone-v5):not(.ifb-iphone-app-standalone-v6)
.chat-form button[type="submit"],
html:not(.ifb-iphone-app-standalone-v2):not(.ifb-iphone-app-standalone-v3):not(.ifb-iphone-app-standalone-v4):not(.ifb-iphone-app-standalone-v5):not(.ifb-iphone-app-standalone-v6)
.message-form button[type="submit"],
html:not(.ifb-iphone-app-standalone-v2):not(.ifb-iphone-app-standalone-v3):not(.ifb-iphone-app-standalone-v4):not(.ifb-iphone-app-standalone-v5):not(.ifb-iphone-app-standalone-v6)
.ifb-chat-form button[type="submit"],
html:not(.ifb-iphone-app-standalone-v2):not(.ifb-iphone-app-standalone-v3):not(.ifb-iphone-app-standalone-v4):not(.ifb-iphone-app-standalone-v5):not(.ifb-iphone-app-standalone-v6)
.ifb-message-form button[type="submit"] {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  overflow: visible !important;
}

/* Input cede espacio por el botón más ancho */
.comment-form input[name="content"],
.page-comment-form input[name="content"],
.retro-page-comment-form input[name="content"],
.chat-form input[name="content"],
.message-form input[name="content"],
.ifb-chat-form input[name="content"],
.ifb-message-form input[name="content"],
.comment-form textarea[name="content"],
.page-comment-form textarea[name="content"],
.retro-page-comment-form textarea[name="content"],
.chat-form textarea[name="content"],
.message-form textarea[name="content"],
.ifb-chat-form textarea[name="content"],
.ifb-message-form textarea[name="content"],
.comment-form input[type="text"],
.page-comment-form input[type="text"],
.retro-page-comment-form input[type="text"],
.chat-form input[type="text"],
.message-form input[type="text"],
.ifb-chat-form input[type="text"],
.ifb-message-form input[type="text"] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: 1px !important;
  max-width: calc(100% - 146px) !important;
  box-sizing: border-box !important;
}

/* Inner del botón centrado */
.comment-form button[type="submit"] .ifb-comment-submit-inner,
.page-comment-form button[type="submit"] .ifb-comment-submit-inner,
.retro-page-comment-form button[type="submit"] .ifb-comment-submit-inner,
.chat-form button[type="submit"] .ifb-comment-submit-inner,
.message-form button[type="submit"] .ifb-comment-submit-inner,
.ifb-chat-form button[type="submit"] .ifb-comment-submit-inner,
.ifb-message-form button[type="submit"] .ifb-comment-submit-inner {
  gap: 4px !important;
  height: 18px !important;
  line-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* ============================================================
   MOBILE
   El botón ya estaba bien de ancho visual, pero se salía.
   Achicamos el input y controlamos la suma total.
   ============================================================ */

@media (max-width: 760px) {
  .comment-form,
  .page-comment-form,
  .retro-page-comment-form,
  .comment-form .form-row,
  .page-comment-form .form-row,
  .retro-page-comment-form .form-row {
    gap: 4px !important;
    padding-right: 1px !important;
    overflow: hidden !important;
  }

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

  .comment-form button[type="submit"],
  .page-comment-form button[type="submit"],
  .retro-page-comment-form button[type="submit"] {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
    padding: 3px 8px !important;
    margin-right: 1px !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
  }

  .comment-form input[name="content"],
  .page-comment-form input[name="content"],
  .retro-page-comment-form input[name="content"],
  .comment-form textarea[name="content"],
  .page-comment-form textarea[name="content"],
  .retro-page-comment-form textarea[name="content"],
  .comment-form input[type="text"],
  .page-comment-form input[type="text"],
  .retro-page-comment-form input[type="text"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 1px !important;
    max-width: calc(100% - 139px) !important;
  }
}

/* Standalone iPhone: conserva redondeo leve, pero entra en ancho */
html.ifb-iphone-app-standalone-v2 .comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v2 .page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v2 .retro-page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v3 .comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v3 .page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v3 .retro-page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v4 .comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v4 .page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v4 .retro-page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v5 .comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v5 .page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v5 .retro-page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v6 .comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v6 .page-comment-form button[type="submit"],
html.ifb-iphone-app-standalone-v6 .retro-page-comment-form button[type="submit"] {
  flex: 0 0 96px !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  border-radius: 4px !important;
}

/* Pantallas muy chicas: baja apenas, pero mantiene más ancho que antes */
@media (max-width: 360px) {
  .comment-form button[type="submit"],
  .page-comment-form button[type="submit"],
  .retro-page-comment-form button[type="submit"] {
    flex-basis: 90px !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

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

  .comment-form input[name="content"],
  .page-comment-form input[name="content"],
  .retro-page-comment-form input[name="content"],
  .comment-form textarea[name="content"],
  .page-comment-form textarea[name="content"],
  .retro-page-comment-form textarea[name="content"],
  .comment-form input[type="text"],
  .page-comment-form input[type="text"],
  .retro-page-comment-form input[type="text"] {
    max-width: calc(100% - 127px) !important;
  }
}