/* ======== SPLITTER STYLES ======== */
#chat-splitter {
  width: 8px;
  background-color: var(--border-color);
  cursor: col-resize;
  position: relative;
  flex: 0 0 8px;
  display: none;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background-color 0.2s ease;
}

#chat-splitter:hover {
  background-color: var(--hover-bg);
}

#chat-splitter.dragging {
  background-color: var(--accent-color);
  transition: none;
}

/* Vertical splitter grip indicator */
#chat-splitter::after {
  content: '\22EE'; /* Vertical ellipsis character (⋮) */
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Horizontal splitter styles */
#file-list-splitter {
  height: 8px;
  background-color: var(--border-color);
  cursor: ns-resize;
  position: absolute;
  width: calc(100% - 40px);
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  left: 20px;
  right: 20px;
  top: var(--splitter-top, calc(95px + 155px));
  user-select: none;
  transition: background-color 0.2s ease;
}

#file-list-container.active ~ #file-list-splitter {
  display: flex;
}

#file-list-splitter.dragging {
  background-color: var(--accent-color);
  transition: none;
  position: fixed;
  margin-top: 0;
}

/* Ensure splitter stays within bounds */
#file-list-splitter.max-height {
  cursor: not-allowed;
}

#file-list-splitter:hover {
  background-color: var(--hover-bg);
}

/* Horizontal splitter grip indicator */
#file-list-splitter::after {
  content: '\22EF'; /* Horizontal ellipsis character (⋯) */
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  display: block;
}

#chat-container.file-open #chat-splitter {
  display: block;
}