/* UI 7C-A · Conversaciones / layout operativo */
@media (min-width: 768px) {
  body > .container[role="application"] {
    max-width: none !important;
    width: auto !important;
    margin-left: var(--inima-sidebar-current) !important;
    padding:
      calc(var(--inima-topbar-height) + 12px)
      14px 14px !important;
    transition: margin-left .18s ease;
  }

  .chat-app {
    height: calc(100dvh - var(--inima-topbar-height) - 26px) !important;
    min-height: 560px !important;
    overflow: hidden !important;
    border: 1px solid var(--inima-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--inima-shadow-soft) !important;
    background: var(--inima-surface) !important;
  }

  .chat-app .people-list {
    width: 320px !important;
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-right: 1px solid var(--inima-border) !important;
    background: var(--inima-surface) !important;
  }

  #plist > .d-flex:first-child {
    flex: 0 0 auto !important;
    padding: 12px 12px 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--inima-border);
  }

  #contactSearch {
    min-height: 40px;
    border-radius: 10px !important;
    background: var(--inima-surface-2) !important;
    border-color: var(--inima-border) !important;
    color: var(--inima-text) !important;
  }

  #contactList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 6px !important;
    scrollbar-gutter: stable;
  }

  #contactList > li {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 4px !important;
    padding: 10px 9px !important;
    border-radius: 11px !important;
    border-bottom: 0 !important;
    transition: background .12s ease, box-shadow .12s ease;
  }

  #contactList > li:hover {
    background: var(--inima-sidebar-hover) !important;
  }

  #contactList > li.active {
    background: var(--inima-sidebar-active) !important;
    box-shadow: inset 3px 0 0 var(--inima-accent);
  }

  #contactList .about {
    min-width: 0 !important;
  }

  #contactList .name,
  #contactList .status {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #noContacts {
    flex: 0 0 auto;
    padding: 6px 12px 12px;
  }

  .chat-app .chat {
    margin-left: 320px !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--inima-surface) !important;
  }

  .chat-app .chat-header {
    flex: 0 0 auto !important;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--inima-border) !important;
    background: var(--inima-surface) !important;
  }

  #attachBar {
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--inima-border);
    background: var(--inima-surface-2);
  }

  #chatHistory {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 20px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background:
      linear-gradient(180deg,
        var(--inima-surface-2),
        var(--inima-bg)) !important;
    scrollbar-gutter: stable;
  }

  .chat-message {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    border-top: 1px solid var(--inima-border) !important;
    background: var(--inima-surface) !important;
  }

  #messageInput {
    min-height: 42px;
    border-radius: 0 11px 11px 0 !important;
    background: var(--inima-surface-2) !important;
    color: var(--inima-text) !important;
    border-color: var(--inima-border) !important;
  }

  #sendBtn {
    min-width: 46px;
    border-radius: 11px 0 0 11px !important;
    background: var(--inima-primary) !important;
    color: #fff !important;
    border-color: var(--inima-primary) !important;
  }
}

@media (max-width: 960px) {
  body > .container[role="application"] {
    margin-left: 0 !important;
    padding-top: calc(var(--inima-topbar-height) + 10px) !important;
  }
}