/*
 * InimaServices UI 7C-A v1.1
 * Fix: buscador + encabezado de contacto siempre visibles.
 *
 * Causa funcional:
 * el contenedor principal podía conservar scroll vertical del documento,
 * dejando la franja superior del chat debajo del topbar fijo.
 */

@media (min-width: 768px) {
  html,
  body {
    height: 100%;
  }

  body {
    overflow: hidden !important;
  }

  /*
   * Fijamos el workspace del chat ENTRE topbar/sidebar y bordes del viewport.
   * Con esto ya no depende del scroll del documento.
   */
  body > .container[role="application"] {
    position: fixed !important;
    top: calc(var(--inima-topbar-height) + 10px) !important;
    right: 14px !important;
    bottom: 12px !important;
    left: calc(var(--inima-sidebar-current) + 14px) !important;

    width: auto !important;
    max-width: none !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    z-index: 20;
  }

  body > .container[role="application"] > .row,
  body > .container[role="application"] > .row > [class*="col-"] {
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  body > .container[role="application"] > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body > .container[role="application"] > .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .chat-app {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /*
   * Lista izquierda:
   * buscador fijo arriba + conversaciones con scroll independiente.
   */
  .chat-app .people-list,
  #plist {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 320px !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    background: var(--inima-surface) !important;
    border-right: 1px solid var(--inima-border) !important;
  }

  #plist > .d-flex:first-child {
    position: relative !important;
    z-index: 5;

    flex: 0 0 auto !important;

    min-height: 62px !important;
    padding: 10px 12px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;

    background: var(--inima-surface) !important;
    border-bottom: 1px solid var(--inima-border) !important;
  }

  #plist .input-group {
    width: 100% !important;
  }

  #search-addon {
    min-width: 42px;
    justify-content: center;
    border-color: var(--inima-border) !important;
    background: var(--inima-surface-2) !important;
    color: var(--inima-primary) !important;
  }

  #contactSearch {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #contactList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 6px !important;
    margin: 0 !important;

    scrollbar-gutter: stable;
  }

  /*
   * Chat derecho:
   * header visible + adjuntos + historial con scroll + composer.
   */
  .chat-app .chat {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 320px !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  .chat-app .chat-header {
    position: relative !important;
    z-index: 4;

    flex: 0 0 auto !important;

    min-height: 66px !important;
    padding: 9px 16px !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    background: var(--inima-surface) !important;
    border-bottom: 1px solid var(--inima-border) !important;
  }

  .chat-app .chat-header .row {
    min-height: 46px !important;
    align-items: center !important;
  }

  .chat-app .chat-header img {
    width: 42px !important;
    height: 42px !important;
    object-fit: cover !important;
    flex: 0 0 42px !important;
  }

  .chat-app .chat-header .chat-about {
    min-width: 0 !important;
  }

  .chat-app .chat-header .chat-about h6 {
    margin: 0 !important;
    color: var(--inima-text) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chat-app .chat-header .chat-about small {
    display: block !important;
    margin-top: 2px;
    color: var(--inima-muted) !important;
    font-size: 9px !important;
  }

  #attachBar {
    position: relative !important;
    z-index: 3;

    flex: 0 0 auto !important;
    min-height: 47px !important;

    padding: 7px 16px !important;

    background: var(--inima-surface-2) !important;
    border-bottom: 1px solid var(--inima-border) !important;
  }

  #chatHistory {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-gutter: stable;
  }

  .chat-message {
    position: relative !important;
    z-index: 3;

    flex: 0 0 auto !important;
    min-height: 60px !important;

    padding: 9px 14px !important;

    background: var(--inima-surface) !important;
    border-top: 1px solid var(--inima-border) !important;
  }
}

/*
 * Cuando el sidebar se contrae, el workspace sigue la variable de UI 7A.
 */
html.inima-sidebar-collapsed body > .container[role="application"],
body.inima-sidebar-collapsed > .container[role="application"] {
  left: calc(var(--inima-sidebar-current) + 14px) !important;
}

@media (max-width: 960px) {
  body {
    overflow: auto !important;
  }

  body > .container[role="application"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100% !important;
    min-height: calc(100vh - var(--inima-topbar-height)) !important;

    margin: 0 !important;
    padding:
      calc(var(--inima-topbar-height) + 10px)
      10px
      14px !important;

    overflow: visible !important;
  }
}